Astrolab UI is an Astro integration that brings an isolated UI development tool into your Astro environment. Astrolab brings all your repositories Astro components into one place where you can view and modify your props and slots on the fly.

• Live prop + slot playground per component
• Automatic discovery of your Astro components
• Populate components in playground with JSON data (Labs)
• Hot reload of component metadata when you edit components
• Zero-config: just add the integration and start your dev server
• Optional global stylesheets & scripts injection

Install as a dev dependency (recommended):

npm i -D astrolab-ui
# or
pnpm add -D astrolab-ui
# or
yarn add -D astrolab-ui

• Astro 5.x and up
• SSG and SSR projects (Astrolab UI only runs in development so we won't interfere with your deployment approach)

Register the integration in your astro.config.mjs (or .ts).

// astro.config.mjs
import { defineConfig } from 'astro/config';
import astrolab from 'astrolab-ui';

export default defineConfig({
  integrations: [
    astrolab({
      // Optional
      componentsDir: 'src/components',
      stylesheets: ['/src/styles/global.css'],
      scripts: ['/src/script.js'],
      excludedComponents: ['Container']
    })
  ]
});

Run your dev server:

npm run dev

Open Astrolab UI either by:

• Clicking the icon in the Astro Dev Toolbar, or
• Visiting /_astrolab directly

You can prefill and keep your component playground data in simple JSON "lab" files.

Where to put lab files

• Create files under src/labs in your Astro project.
• One file per component, named exactly after the component file name.
  • Example: src/components/Button.astro → src/labs/Button.json.

Schema

• A lab file supports two top-level keys:
  • props: JSON object of prop values to pass to the component.
  • slots: JSON object of slot contents. Keys are slot names; values should be strings (HTML allowed). Use "default" for the default slot.

Example

{
  "props": {
    "variant": "primary",
    "disabled": false,
    "label": "Click me"
  },
  "slots": {
    "default": "<strong>Click me</strong>"
  }
}

Notes

• props values must be valid JSON. Complex objects/arrays are supported.
• slots values are rendered as HTML.

Contributions to Astrolab UI are always welcome and appreciated! Please feel free to open issues or pull requests for bugs and features.

Astrolab UI is licensed under the MIT License.

Made by Louie Richardson 👨🏻‍🚀