Welcome to Codeframe.

The simplest, easiest, fastest way to build a webpage.
Start building → How it works

Try it live!

This is the Codeframe editor. Change the HTML, CSS, or JavaScript code on the right pane to see the changes in the left pane.

Code, Share, Remix

You can build webpages in Codeframe with HTML, CSS, and JavaScript in seconds, share your work with just a link, and remix Codeframes from other people with your ideas.

From idea to code to live site in seconds

Open a new Codeframe, start typing, and hit Preview to see your code in action in seconds. Your code should run at the speed of your ideas, and Codeframe is built for speed.

Share with anyone with just a link

Each Codeframe has a unique link that points to a specific version of the project. This makes it super easy to share a Codeframe site or code to anyone in the world with an internet connection –– just send a link!

Read and remix projects from everyone else

Every Codeframe site's source code is public and remixable on Codeframe. This means you can find a project you like and build on top of it to make it your own, then share it so others can remix your ideas.

Starter Templates

Intro to HTML + CSS

Just getting introduced to the web with HTML or CSS? Start here with projects that use HTML and CSS to build simple webpages.

Hello, World!

New to programming for the web? Get your feet wet with a "Hello, World!" example using simple HTML tags and JavaScript.

Minimal Blog

Let's add a little flair to our HTML! This blog template design uses CSS to add some modern simplicity to the look and feel of a blog article.

Flexboxes!

Flexbox is a modern CSS feature that makes it simple to create row or column layouts on the page. Read through this little introduction to CSS flexbox and experiment with the feature right in the Codeframe.

Button Hover Effects

CSS, transitions, and animations give us a lot of tools to make our UI elements interactive and lively. This Codeframe shows a few interactive effects you can add to buttons as you hover over them and click on them.

Filters and Shadows

CSS filters are a new feature that, alongside box shadows, can add a bit of flair to your web design easily. Explore how to work with CSS filters and shadows in this little Codeframe.

JavaScript Experiments

JavaScript adds a limitless layer of interactivity over HTML and CSS to make our webpages dynamic. Dive into these JS-focused examples to start building more powerful web pages and applications.

Interactive Input

How do we make our HTML come alive? This Codeframe is a simple example of a JavaScript web app using event listeners to respond to your input.

Painting on the Canvas

Canvas is a way to draw 2D and 3D scenes efficiently in web browsers, and it opens up a whole horizon of possibilities from 3D games to drawing apps to video players. Explore HTML canvas in this canvas-powered painting app that follows your mouse and touch.

Built with Torus

Torus is a lightweight JavaScript library for building fast, dynamic web apps like Codeframe (which is powered by Torus). You can explore simple Torus apps in these examples.

Dynamic Name Tag

This introductory Codeframe is a simple Torus app that shows a variety of UI related APIs Torus, including components, styles, and templating.

Todo List App

Everyone needs a todo list! Look at how Torus stores and references data through an application in this Codeframe for a bare-bones todo web app.

Blank Torus App

Starting a new project with Torus? There's not a lot of setup anyways, but we've got everything prepared for you here in this starter Codeframe.

Who? What? Why?

So. Why did I make this? Well,

I like to work on side projects all the time. My computer is littered with quick, small projects from random late nights and weekends where I found some time to start hacking on random ideas entertain myself or make my life less repetitive. But as I built more and more projects, I saw that the least interesting part about starting a new idea –– setting everything up, configuring files and scripts –– was also the biggest deterrent to my creativity.

So I started another side project! Enter Codeframe.

I started building Codeframe to solve this problem: it's meant to be the fastest way to go from idea to code running on a live webpage that can be shared with anyone on the planet. Everything from the technical stack from top to bottom, to the simplicity of the UI, to the fact that Torus comes included into every Codeframe, is designed with the goal of speed of creativity in mind.

I also frequently run into opportunities to teach web design and development, and find myself wanting something more lightweight and approachable than CodePen, Glitch, and Repl.it, which are fantastic alternatives but often too heavy or complex for beginners in web development. For these times, Codeframe is meant to be a simpler, more approachable alternative.

But above all, Codeframe exists to make it easier to learn how to make things on the web, and to make it faster and more painless to build things for the web. If you're a maker of beautiful things on the Internet, I hope you give Codeframe a try, and I hope you love it.

If you have questions, comments, or feedback, please come find me! I'm on Twitter and GitHub @thesephist.