🎨 Shader UI

Shader components FTW!

🚀 Installation

Install the package and its peer dependencies:

npm install @toriistudio/shader-ui
# or
yarn add @toriistudio/shader-ui

📄 License

MIT

🤝 Contributing

We welcome contributions!

If you'd like to improve the playground, add new features, or fix bugs:

1. Fork this repository
2. Clone your fork: git clone https://github.com/your-username/shader-ui
3. Install dependencies: yarn or npm install
4. Make your changes in a branch: git checkout -b my-new-feature
5. Push your branch and open a pull request

Before submitting a PR:

• Run yarn build to ensure everything compiles
• Make sure the playground runs without errors (yalc push or npm link for local testing)
• Run the e2e tests (see below)
• Keep the code style clean and consistent

E2E Tests

The project uses Playwright for end-to-end testing. Tests verify that the code snippets generated by the playground are accurate and render correctly in isolation.

Prerequisites

yarn install                    # install root deps (includes @playwright/test)
yarn playwright install chromium # download browser binaries (first time only)

Running tests

yarn local:push   # build shader-ui and push via yalc
yarn test:e2e     # run all e2e tests

Playwright automatically starts the required dev servers (example playground + sandbox), so no manual server startup is needed.

Adding tests for new examples

Edit e2e/tests/code-fidelity.spec.ts and add an entry to the EXAMPLES array:

{
  slug: "your-example",       // must match the folder name in examples/
  component: "YourComponent", // exported component name from @toriistudio/shader-ui
  port: 5175,                 // unique port for this example
  controls: [
    { label: "speed", value: "0.5", propPath: "speed" },                    // top-level prop
    { label: "uAmplitude", value: "1.2", propPath: "uniforms.uAmplitude" }, // nested prop
  ],
}

Then add a matching webServer entry in e2e/playwright.config.ts for the new port.

We’re excited to see what you’ll build 🎨🚀