Appearance

Light
Dark

Custom colors

Primary
Secondary
Tertiary

Syntax

plain
comment
keyword
tag
punctuation
definition
property
static
string

Palette

activeText
defaultText
inactiveText
activeBackground
defaultBackground
inputBackground
accent
errorBackground
errorForeground

Typography

Themes

Night Owl
Monokai
Sandpack Dark
Fantasy
Dracula
Cobalt
Amy
Base

Preview

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Export

{
  "palette": {
    "activeText": "#0971F1",
    "defaultText": "#757678",
    "inactiveText": "#e6f1fe",
    "activeBackground": "#e4e7eb",
    "defaultBackground": "#f8f9fb",
    "inputBackground": "#ffffff",
    "accent": "#0971F1",
    "errorBackground": "#FF453A",
    "errorForeground": "#ff453a"
  },
  "syntax": {
    "plain": "#151515",
    "comment": {
      "color": "#999",
      "fontStyle": "italic"
    },
    "keyword": "#0971F1",
    "tag": "#d28cf6",
    "punctuation": "#151515",
    "definition": "#042d60",
    "property": "#0971F1",
    "static": "#FF453A",
    "string": "#bf5af2"
  },
  "typography": {
    "bodyFont": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
    "monoFont": "\"Fira Mono\", \"DejaVu Sans Mono\", Menlo, Consolas, \"Liberation Mono\", Monaco, \"Lucida Console\", monospace",
    "fontSize": "14px",
    "lineHeight": "1.4"
  }
}