CodePen Converter
An open-source tool from yikesable.dev
Drag & Drop File
or click to select
... or edit directly below ...
Step 1: Pen Settings
In your Pen's Settings, add these to the correct fields.
Add Class(es) to <html>
Warning: Classes from the `<body>` tag were merged here. In CodePen, add all classes to the `<html>` settings for them to apply correctly.
CSS (Stuff for <head>)
JS (External Scripts)
Step 2: Paste Into Panels
Paste each block into the corresponding panel in your Pen.
HTML Panel
CSS Panel
JavaScript Panel