cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv headernumbered-list123split-screen

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

Starter

$12.00/month
Go Annual, Save 25%!
$9.00/month
Billed Annually
Switch to Monthly
Sign Up

For the lone peacocks,
the rolling stones.

Developer

$19.00/month
Go Annual, Save 25%!
$14.25/month
Billed Annually
Switch to Monthly
Sign Up

For the motivated mavens,
the keyboard wanderer.

Super

$39.00/month
Go Annual, Save 25%!
$29.25/month
Billed Annually
Switch to Monthly
Sign Up

For the radical malcontents,
the wild-eyed acumens.

 
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
 
 
Collab Mode
2-Person
Collab Mode
6-Person
 
Collab Mode
10-Person
 
Professor Mode
10-Person
Professor Mode
35-Person
 
Professor Mode
100-Person
Live View
 
Projects
10 Projects
50 Files / Project
1 Deployed Project
Projects
25 Projects
150 Files / Project
5 Deployed Projects
Use Your Own Domain for 5 Projects
 
Projects
50 Projects
300 Files / Project
20 Deployed Projects
Use Your Own Domain for 20 Projects
 
Asset Hosting
1 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
Asset Hosting
5 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
 
Asset Hosting
10 GB Asset Storage
2 MB Max File Size
Unlimited Bandwidth
Presentation Mode
 
Debug View
No Log In Required
 
 
No Ads
You See No Ads
No Ads
You See No Ads
No Ads on Your Stuff
 
No Ads
You See No Ads
No Ads on Your Stuff
 
Higher Standing in
Popularity Algorithm
 
 
Send to Phone SMS
100
Send to Phone SMS
1,000
 
Send to Phone SMS
2,000
Use Pen in Header of Profile
PRO Badge
 
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
 
Unlimited Pen Templates
Yup PRO Perks Yup

Starter

Developer

Super

Super Team

Teams are billed per individual Member, with a minimum of 5 Members.
$19.00/month per Member
Go Annual, Save 25%!
$14.25/month per Member
Billed Annually
Switch to Monthly
Sign Up

For the roving bands, the nomadic tribes.

Each Member

$19.00 /month Value

Each member of your Team will receive the Developer Plan features listed below for their own personal account.

Below is the feature set for for the Team account itself. In addition, each Team Member gets PRO features equivalent to the individual Developer Plan when they are using CodePen as themselves.
Collab Mode
10-Person
Collab Mode
6-Person
Professor Mode
35-Person
Professor Mode
35-Person
Live View
Live View
Presentation Mode
Presentation Mode
Debug View
No Log In Required
Debug View
No Log In Required
Asset Hosting
10 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
Asset Hosting
5 GB Total Storage
2 MB Max File Size
Unlimited Bandwidth
Projects
20 Projects per Member
300 Files / Project
10 Deployed Projects per Member
Use Your Own Domain for 10 Projects per Member
Projects
25 Projects
150 Files / Project
5 Deploys
Use Their Own Domain for 5 Projects
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
Unlimited Private
Pens, Posts, & Collections
Private Projects only limited by number of allowed Projects
No Ads
You See No Ads
No Ads on Your Stuff
No Ads
They See No Ads
No Ads on Their Stuff
Higher Standing in
Popularity Algorithm
Higher Standing in
Popularity Algorithm
Send to Phone SMS
2,000
Send to Phone SMS
1,000
Use Pen in Header of Profile
Use Pen in Header of Profile
PRO Badge
PRO Badge
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
Embed Themes
Unlimited Themes
Custom CSS
Hide Tab Bar & Logo
Unlimited Pen Templates
Unlimited Pen Templates
PRO Perks PRO Perks