CodePen

Embed CodePen demos in your Markdown.

Demo

See Solar System animation - Pure CSS by kowlor on CodePen.

A demo with user and slug hash

<CodePen
  user="kowlor"
  slug-hash="ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See Solar System animation - Pure CSS by kowlor on CodePen.

A demo with link

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See Envelope w/ Hearts by kowlor on CodePen.

A click to run demo

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Envelope w/ Hearts"
  status="clicktorun"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

Options

linkstring

CodePen project link.

userRequiredstring

CodePen user. Required when link is not set.

slugHashRequiredstring

CodePen project slug hash. Required when link is not set.

titlestring

CodePen project title.

heightnumber

Default380

Editor height in pixels.

theme"default" | "light" | "dark"

Default"default"

Editor theme.

status"autoload" | "preview" | "clicktorun"

Default"preview"

CodePen embed demo status.

• "autoload": The demo will be loaded when the page is loaded.
• "preview": The code of demo will be loaded and a preview button will be shown.
• "clicktorun": The demo will only be loaded after user clicks the "Run Code" button.

defaultTabstring[]

Default["result"]

Default opened editor tab.