CodePen Projects have URL’s like this:

That will take you to the Project Editor. None of the files will be open in the editor area though, and CodePen will take a stab at guessing for a file to open in the preview. For example, if there is an index.html file, that’s what we’ll open.

But let’s say you’d prefer to share your project with a specific file open in the editor. You can! you pass a URL parameter like…


Note the complete file path including / there.

Likewise, you can tell the preview area to open a specific file. Perhaps you have multiple HTML files and prefer a non-default one to load…


Note that I used an & here. That’s just how URL parameters work. To start URL parameters you use a ? (for the first one), then to use multiple you separate them with &.

Finally, you can specify what percentage of the window you’d like the preview area to take up. If you’d like it 50/50, you’d put:


Here’s an example all together: