Appearance

Light
Dark

Custom colors

Primary
Secondary
Tertiary

Syntax

plain
comment
keyword
tag
punctuation
definition
property
static
string

Colors

surface1
surface2
surface3
clickable
base
disabled
hover
accent
error
errorSurface

font

Themes

Aqua blue
Github light
Monokai pro
Night owl
Sandpack dark

Preview

export default function App() {
  return <h1>Hello World</h1>
}

Export

{
  "colors": {
    "surface1": "#ffffff",
    "surface2": "#EFEFEF",
    "surface3": "#F3F3F3",
    "clickable": "#808080",
    "base": "#323232",
    "disabled": "#C5C5C5",
    "hover": "#4D4D4D",
    "accent": "#0971F1",
    "error": "#ff453a",
    "errorSurface": "#ffeceb"
  },
  "syntax": {
    "plain": "#151515",
    "comment": {
      "color": "#999",
      "fontStyle": "italic"
    },
    "keyword": "#0971F1",
    "tag": "#d28cf6",
    "punctuation": "#3B3B3B",
    "definition": "#042d60",
    "property": "#0971F1",
    "static": "#FF453A",
    "string": "#bf5af2"
  },
  "font": {
    "body": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
    "mono": "\"Fira Mono\", \"DejaVu Sans Mono\", Menlo, Consolas, \"Liberation Mono\", Monaco, \"Lucida Console\", monospace",
    "size": "13px",
    "lineHeight": "20px"
  }
}