css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

CodePen makes it easy to write about code.

Sign Up

Blog

No need for a fancy explanation. That's what you get with a free CodePen account: a blog. You write stuff, you publish it, people read it. It's absolutely that simple. But the tools are there to go nuts with it if you want to.

There is no setup at all. You just select New Post, give it a title, type some words, and publish.

See an Example Post →

Screenshots of Blogging Related Stuff

Writing in Markdown Example

Write in Markdown

If you already like writing in Markdown, wonderful. If you haven't tried it yet, give it a shot, we bet you'll like it.

It's like this: writing for the web means your words and paragraphs end up as HTML. Writing directly in HTML would be <em>annoying</em> (see?!), but WYSIWYG editors are even worse, especially for those of us who like simple and direct control over how those words turn out.

Markdown solves that. No tedious HTML: italic is just *like this*, lists are just multiple lines that start with dashes, headers start with # hashes). But if you want to use HTML, you totally can (even mixed together). Here's some linkage:


Syntax Highlighting

As a coder, it's almost a guarantee that the code you look at every day is syntax highlighted. It's a fundamental feature of a code editor. So when you see code that isn't highlighted, it looks weird and broken. Never fear, you don't have to think about it here on CodePen. Just mark the language and we'll do our best to highlight it.

Oh, and another thing. Since you write in Markdown you don't have to worry about escaping code. Those <div>'s will be just fine as they are.

Syntax Highlighting Example

Example of Embedded Pens

Embedding Pens

Showing off live code demos in blog posts is simple: just make a Pen and embed it right in the Post. There is something so satisfying about blog posts with real live working code you can see, isn't there?

The work of embedding the Pen is trivially easy. Just find the Pen in the area right next to the editor and drag and drop it into the editor.


Custom CSS Everywhere

Applying custom CSS to an individual blog post is easy. We put a CSS editor right below the post editor! You can use it to control the look of a blog post however you would like. Perhaps some minor tweaks to the style, perhaps a fully "art directed" post, perhaps you use it to demonstrate an idea you're talking about in the post itself.

If you're a CodePen PRO member, you can also apply custom CSS to your blog homepage as well as to every single individual blog post, so you have full control to customize the look and feel of your blog.

Customized Posts

Example of Comments on a Blog Post

Comments

Yet another thing you don't have to worry about setting up! All blog posts have a comment thread where people can discuss what you've written. You can choose to get email notifications when people comment (likewise when you comment on other people's posts).

Don't like 'em? Turn them off anytime.


RSS

Every blog has an RSS feed. That means your loyal readers can keep up with your writing in their feed reader of choice.

It's also kinda like a basic API to your content, if you want to think of it that way. Perhaps you want to showcase your most recent post on another site or the like.

Blog Posts in Feed Readers

Blog Posts in Feed Readers

Community

Not to get all sappy on you, but blogging on CodePen makes you part of a community. Your posts might be found by fellow developers who just stumble across you because they are also CodePen users. We do our best to make that cross-pollination happen by promoting great blog posts, showing off popular and related posts, and making your posts findable in search.


CodePen is so much more.

Blogging is just a small part of CodePen. Perhaps a bigger feature is our powerful in-browser code editor which allows you to create demos with HTML, CSS, JavaScript (and with any of the popular preprocessors).

You can learn more about all that is CodePen here.

What are you waiting for? Choose a plan!

Individual Plans
Team Plans

Free

0 forever

Starter

Annual Starter

Switch to monthly billing Switch to annual billing

Developer

Annual Developer

Switch to monthly billing Switch to annual billing

Super

Annual Super

Switch to monthly billing Switch to annual billing
  • Unlimited public Pens, Posts, and Collections
  • Unlimited templates
  • Debug view (requires log in)
  • 1 Embed theme
  • 1 project with 10 files
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen
  • 10 Projects with 50 files/project
  • 1 deployed Project
  • 2 person Collab Mode
    (Pens only)
  • 10 person Professor Mode
    (Pens only)
  • Asset hosting with 1 GB total storage
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen & no ads on your stuff
  • Use your own domain for Projects
  • 25 Projects with 150 files/Project
  • 5 deployed Projects
  • 6 person Collab Mode
    (Pens only)
  • 35 person Professor Mode
    (Pens only)
  • Asset hosting with 5 GB total storage
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen & no ads on your stuff
  • Use your own domain for Projects
  • 50 projects with 300 files/project
  • 20 deployed Projects
  • 10 person Collab Mode
    (Pens only)
  • 100 person Professor Mode
    (Pens only)
  • Asset hosting with 10 GB total storage

Super Team

Annual Super Team

Starting a team gives one team account and boosts your team members’ plans to developer level. You can easily switch between working on pens, projects, posts and collections on team and individual accounts.

5
Switch to monthly billing Switch to annual billing

Team account features

Each team gets its own account.

  • All Team Members share access to the Team Account, which has its own profile. That way everyone can work together, sharing access to editing Pens, Projects, Posts, Collections, and Assets.
  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • Debug View (no log in required)
  • Live View
  • PRObadge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • See no ads on CodePen & no ads on your stuff
  • 10 person Collab Mode (Pens only)
  • 35 person Professor Mode (Pens only)
  • Asset hosting with 10 GB total storage
  • 20 Projects with 300 files/project
    (20 Projects/member)
  • 10 deployed Projects
    (10 per Team member)
  • Use your own domain for 10 Projects
    (10 per Team member)

Team member features

Each team member gets all the features of a Developer PRO account.

  • Unlimited public and private Pens, Posts, and Collections
  • Unlimited templates
  • Debug View (no log in required)
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen & no ads on your stuff
  • 6 person Collab Mode (Pens only)
  • 35 person Professor Mode (Pens only)
  • Asset hosting with 5 GB total storage
  • 25 projects with 150 files/Project
  • 5 deployed Projects
  • Use your own domain for Projects