Astryx component sandbox for designer exploration and vibe testing. Deployed alongside Storybook on every PR.

Before writing any code, install dependencies:

npm install

This automatically generates AGENTS.md with the Astryx component index via astryx init --features agents. Read AGENTS.md for all Astryx component documentation: it contains CLI commands to browse components, tokens, themes, and design rules.

If AGENTS.md is missing, regenerate it:

npx astryx init --features agents

The sandbox is a Next.js app configured for static export (output: 'export'). On PRs, the CI workflow builds it and deploys to GitHub Pages at a versioned URL:

https://facebook.github.io/astryx/{commit}/sandbox/

1. Create src/app/pages/<name>/page.tsx:

'use client';

import {VStack, Heading, Text} from '@astryxdesign/core';

export default function MyPage() {
  return (
    <VStack gap={4}>
      <Heading level={1}>My Page</Heading>
      <Text type="body">Content here</Text>
    </VStack>
  );
}

2. Add an entry to the pages array in src/app/Sidebar.tsx

The page will appear in the sidebar and get its own URL in the PR deployment.

Three ways to run the sandbox locally, depending on what you're iterating on:

pnpm dev:sandbox

Builds @astryxdesign/core once, then starts the sandbox. Edits to packages/core/src/ require a manual rebuild (pnpm build). Good for working on sandbox pages themselves without touching core components.

pnpm dev:sandbox:source

Resolves @astryxdesign/core from TypeScript source directly via the "source" exports condition. Edits to component source hot-reload instantly (~200ms). Theming and CSS layers don't work in this mode because the CSS @layer wrapping only exists in the built dist output. Use for layout and behavior iteration only.

Run in two terminals:

# Terminal 1: watch core for changes, rebuild dist incrementally
pnpm -F @astryxdesign/core dev

# Terminal 2: start sandbox (uses dist with correct CSS layers)
pnpm -F @astryxdesign/sandbox dev

Edits trigger incremental dist rebuilds via Babel CLI (a few seconds), and CSS layer ordering is correct. Theming works properly.