Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div>
  <img src="data:image/png;base64,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">
</div>
              
            
!

CSS

              
                img{
  width:64px;
  transform:rotate(90deg);
}
img:hover{
  transform:scale(1.5);
}
              
            
!

JS

              
                
              
            
!
999px

Console