Playground

Name: VivekUI
Author: Vivek Kumar Singh

Every export from the library and its charts is already in scope. Edit the code and it renders as you type. Your draft is kept in this browser, and the URL is shareable.

Live

TypeScript

25 lines

function App() {
  const [count, setCount] = React.useState(0)

  return (
    <Stack gap={6}>
      <Heading level={1}>Hello from the playground</Heading>
      <Text tone="muted">
        Every export is already in scope. Edit this and it re-renders.
      </Text>

      <Card variant="elevated" padding="lg">
        <Card.Header>
          <Heading level={3}>Counter</Heading>
        </Card.Header>
        <Card.Body>
          <Text>Clicked {count} times.</Text>
        </Card.Body>
        <Card.Footer>
          <Button onClick={() => setCount(count + 1)}>Click me</Button>
          <Button variant="outline" onClick={() => setCount(0)}>Reset</Button>
        </Card.Footer>
      </Card>
    </Stack>
  )
}

Tab indents, Shift+Tab outdents, Ctrl+Enter runs now, Escape leaves the editor.