### Quick Start: Story Example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of creating a StoryLite story file.

```typescript
import type { StoryLiteMeta, StoryLiteStoryDefinition } from '@storylite/storylite'
import buttonHtml from './button.html?raw'

export default {
  title: 'Components/Button',
} satisfies StoryLiteMeta

export const Primary = {
  args: {
    label: 'Save changes',
  },
  argTypes: {
    label: { control: 'text' },
  },
  render: (args) => buttonHtml.replace('{{ label }}', String(args.label)),
} satisfies StoryLiteStoryDefinition<{ label: string }>
```

--------------------------------

### Quick Start: Configuration

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of creating a StoryLite configuration file.

```typescript
import { defineConfig } from '@storylite/storylite'

export default defineConfig({
  stories: ['./src/**/*.stories.ts'],
  css: ['./src/styles.css'],
})
```

--------------------------------

### storylite dev command example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of starting the development server with custom port and host.

```sh
storylite dev --port 4103 --host 127.0.0.1
```

--------------------------------

### Install StoryLite

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Install StoryLite as a development dependency.

```sh
pnpm add -D @storylite/storylite
```

--------------------------------

### Install Dependencies

Source: https://github.com/itsjavi/storylite/blob/main/CONTRIBUTING.md

Installs project dependencies using pnpm.

```sh
pnpm install
```

--------------------------------

### Scoped Examples

Source: https://github.com/itsjavi/storylite/blob/main/AGENTS.md

Examples of running commands on specific scoped packages.

```sh
pnpm -F @storylite/storylite run typecheck
pnpm -F @storylite/storylite run test
pnpm -F @storylite/web run build:pages
```

--------------------------------

### storylite preview command example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of serving the static output with custom port, host, and base path.

```sh
storylite preview --port 4103 --host 127.0.0.1 --base /docs/
```

--------------------------------

### storylite build command example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of building static StoryLite output with a custom base path.

```sh
storylite build --base /docs/
```

--------------------------------

### Install Tailwind CSS

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Command to install Tailwind CSS and its Vite plugin.

```sh
pnpm add -D tailwindcss @tailwindcss/vite
```

--------------------------------

### Quick Start: Run StoryLite

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Command to run StoryLite in development mode.

```sh
pnpm storylite
```

--------------------------------

### Home Page Markdown Example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of a Markdown file to be used for the home page.

```markdown
---
title: Component Library
description: Component stories
---

# Component Library

Use the sidebar to browse components.
```

--------------------------------

### Quick Start: Build Static Output

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Command to build static output for StoryLite.

```sh
pnpm storylite:build
```

--------------------------------

### Configuration: Extended Options

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of a more comprehensive StoryLite configuration file.

```typescript
import { defineConfig } from '@storylite/storylite'

export default defineConfig({
  stories: ['./src/**/*.stories.{ts,tsx}'],
  css: ['./src/styles.css'],
  home: '# Component Library',
  setup: './.storylite/setup.ts',
  renderers: [],
  vitePlugins: [],
  storyId: (_path, suggestedId) => suggestedId,
})
```

--------------------------------

### HTML Fragment Callback Example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of using a callback function for HTML fragments to dynamically generate content.

```typescript
previewHead: (defaultHead) => `${defaultHead}<meta name="extra" content="true">`
```

--------------------------------

### Extending Menu Links

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of how to extend or replace the default menu links.

```typescript
export default defineConfig({
  ui: {
    menuLinks: (defaultLinks) => [
      ...defaultLinks,
      {
        id: 'docs',
        label: 'Docs',
        icon: 'external-link',
        href: '/docs',
      },
    ],
  },
})
```

--------------------------------

### Install Framework Adapters

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Add framework adapters as needed for React, Svelte, Vue, and Solid.

```sh
pnpm add -D @storylite/renderer-react
pnpm add -D @storylite/renderer-svelte
pnpm add -D @storylite/renderer-vue
pnpm add -D @storylite/renderer-solid
```

--------------------------------

### UI Customization Example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of customizing StoryLite's manager UI using the 'ui' configuration object.

```typescript
export default defineConfig({
  ui: {
    brand: {
      markHtml: '<span>UI</span>',
      titleHtml: '<strong>Design System</strong>',
      subtitle: 'Component workbench',
    },
    backgrounds: (defaults) => [...defaults, { label: 'Brand', value: '#eff6ff' }],
    viewports: (defaults) =>
      defaults.map((viewport) =>
        viewport.icon === 'mobile' ? { ...viewport, width: 390 } : viewport,
      ),
    css: '.brand__mark { color: var(--sl-primary); }',
  },
})
```

--------------------------------

### Web Components Renderer Example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of configuring StoryLite to use the 'web-components' renderer for a custom element.

```typescript
export default {
  title: 'Components/DemoButton',
  component: 'demo-button',
  parameters: {
    renderer: 'web-components',
    defineCustomElements: (window) => {
      window.customElements.define('demo-button', DemoButton)
    },
  },
}

export const Primary = {
  args: {
    label: 'Save',
  },
}
```

--------------------------------

### Story Format Example

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of a story definition using StoryLite's CSF-like format.

```typescript
import type { StoryLiteMeta, StoryLiteStoryDefinition } from '@storylite/storylite'

type ButtonArgs = {
  label: string
  variant: 'primary' | 'secondary'
  disabled: boolean
}

export default {
  title: 'Components/Button',
  args: {
    variant: 'primary',
    disabled: false,
  },
  argTypes: {
    label: { control: 'text' },
    variant: { control: 'select', options: ['primary', 'secondary'] },
    disabled: { control: 'boolean' },
  },
  parameters: {
    renderer: 'html',
  },
} satisfies StoryLiteMeta<ButtonArgs>

export const Primary = {
  name: 'Primary',
  args: {
    label: 'Save changes',
  },
  render: (args) => `<button data-variant="${args.variant}">${args.label}</button>`,
} satisfies StoryLiteStoryDefinition<ButtonArgs>
```

--------------------------------

### Conventional Commit Message Examples

Source: https://github.com/itsjavi/storylite/blob/main/CONTRIBUTING.md

Examples of Conventional Commit messages for different types of changes.

```txt
feat(renderer-react): add static story rendering
fix(cli): preserve configured base path in static output
docs(readme): update install instructions
```

--------------------------------

### Configuration with Dynamic Home Page

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of configuring StoryLite to load the home page content from a file.

```typescript
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import { defineConfig } from '@storylite/storylite'

const home = readFileSync(fileURLToPath(new URL('../README.md', import.meta.url)), 'utf8')

export default defineConfig({
  stories: ['./src/**/*.stories.{ts,tsx}'],
  home,
})
```

--------------------------------

### Install Chromium for E2E Tests

Source: https://github.com/itsjavi/storylite/blob/main/CONTRIBUTING.md

Installs the Chromium browser required for running Playwright end-to-end tests.

```sh
pnpm -F @storylite/e2e run e2e:install
```

--------------------------------

### Monorepo Workspace Filters

Source: https://github.com/itsjavi/storylite/blob/main/AGENTS.md

Examples of how to filter commands to specific packages within the monorepo.

```sh
pnpm -F @storylite/storylite <script>
pnpm -F @storylite/web <script>
pnpm -F @storylite/e2e <script>
```

--------------------------------

### Public Assets: Custom Directory or Disable

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of configuring the public directory for static assets.

```typescript
export default defineConfig({
  publicDir: './.storylite/public',
  // publicDir: false,
})
```

--------------------------------

### Add StoryLite-specific Vite plugins

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of how to add Vite plugins to StoryLite configuration.

```typescript
import { defineConfig } from '@storylite/storylite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  stories: ['./src/**/*.stories.tsx'],
  css: ['./src/styles.css'],
  vitePlugins: [tailwindcss()],
})
```

--------------------------------

### Vite plugins as a callback

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of using a callback function to conditionally add Vite plugins.

```typescript
vitePlugins: ({ target, command, projectRoot }) => {
  if (target === 'static') return []
  return [tailwindcss()]
}
```

--------------------------------

### Commands for StoryLite E2E

Source: https://github.com/itsjavi/storylite/blob/main/apps/e2e/README.md

This table outlines the commands used for managing and running the StoryLite E2E tests, including installation, typechecking, and execution.

```bash
pnpm -F @storylite/e2e run e2e:install
```

```bash
pnpm -F @storylite/e2e run typecheck
```

```bash
pnpm -F @storylite/e2e run e2e
```

```bash
pnpm -F @storylite/e2e run e2e:show
```

--------------------------------

### Custom Toolbar Tools Configuration

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of how to define custom tools for the StoryLite toolbar, including toggle, select, and link types.

```typescript
export default defineConfig({
  ui: {
    toolbar: [
      {
        type: 'toggle',
        id: 'a11y-outlines',
        label: 'A11y outlines',
        icon: 'accessibility',
        defaultValue: false,
        target: { type: 'preview-class', name: 'show-a11y-outlines' },
      },
      {
        type: 'select',
        id: 'density',
        label: 'Density',
        icon: 'layout',
        options: [
          { label: 'Comfortable', value: 'comfortable' },
          { label: 'Compact', value: 'compact' },
        ],
        target: { type: 'preview-class', prefix: 'density-' },
      },
      {
        type: 'link',
        id: 'repo',
        label: 'Repository',
        icon: 'external-link',
        href: 'https://github.com/example/design-system',
        target: '_blank',
        rel: 'noreferrer',
      },
    ],
  },
})
```

--------------------------------

### Svelte, Vue, and Solid Renderer Adapters

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of configuring StoryLite to use Svelte, Vue, and Solid renderer adapters.

```typescript
import svelte from '@storylite/renderer-svelte'
import vue from '@storylite/renderer-vue'
import solid from '@storylite/renderer-solid'

export default defineConfig({
  renderers: [svelte(), vue(), solid()],
})
```

--------------------------------

### Project CSS: Story-Specific CSS with Vite Transforms

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of importing story-specific CSS with Vite transforms enabled.

```typescript
import css from './button.css?inline'

export const Primary = {
  parameters: { css },
}
```

--------------------------------

### React Renderer Adapter

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of configuring StoryLite to use the React renderer adapter.

```typescript
import { defineConfig } from '@storylite/storylite'
import react from '@storylite/renderer-react'

export default defineConfig({
  stories: ['./src/**/*.stories.tsx'],
  css: ['./src/styles.css'],
  renderers: [react()],
})
```

--------------------------------

### Project CSS: Story-Specific CSS

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of adding story-specific CSS directly in the story parameters.

```typescript
export const Primary = {
  parameters: {
    css: '.button { border-radius: 8px; }',
  },
}
```

--------------------------------

### Boolean Control Type

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of declaring a boolean control type for an argument.

```typescript
argTypes: {
  disabled: { control: 'boolean' },
}
```

--------------------------------

### Select Control Type with Options

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Example of declaring a select control type with options for an argument.

```typescript
argTypes: {
  variant: {
    control: { type: 'select' },
    options: ['primary', 'secondary'],
    description: 'Visual treatment',
  },
}
```

--------------------------------

### Common Commands

Source: https://github.com/itsjavi/storylite/blob/main/AGENTS.md

A list of common commands for developing, building, testing, and formatting the project.

```sh
pnpm dev                 # all workspace dev servers
pnpm dev:web             # apps/web only
pnpm dev:storylite       # core package dev server
pnpm build               # build all workspaces
pnpm build:packages      # packages only
pnpm build:web           # apps/web only
pnpm typecheck           # all workspaces
pnpm format              # write formatting
pnpm format:check        # CI formatting gate
pnpm test                # unit tests (Vitest)
pnpm test:e2e            # Playwright e2e
pnpm qa                  # typecheck + format + build + test + e2e
```

--------------------------------

### Run Package-Specific Scripts

Source: https://github.com/itsjavi/storylite/blob/main/CONTRIBUTING.md

Demonstrates how to use pnpm filters to run scripts within specific workspaces.

```sh
pnpm -F @storylite/web run test
pnpm -F @storylite/storylite run typecheck
```

--------------------------------

### Common Commands

Source: https://github.com/itsjavi/storylite/blob/main/CONTRIBUTING.md

A list of common commands for development, building, testing, and formatting within the StoryLite project.

```sh
# Start every dev server
pnpm dev

# Start only the web demo
pnpm dev:web

# Build everything
pnpm build

# Build packages only
pnpm build:packages

# Build the web demo only
pnpm build:web

# Typecheck all workspaces
pnpm typecheck

# Check formatting
pnpm format:check

# Format files
pnpm format

# Run unit tests
pnpm test

# Run Playwright e2e tests
pnpm test:e2e

# Run the full local QA sequence
pnpm qa
```

--------------------------------

### Create Release Version Commit and Tag

Source: https://github.com/itsjavi/storylite/blob/main/CONTRIBUTING.md

Commands to create a release version commit and tag for the project.

```sh
pnpm pkg:version patch
pnpm pkg:version minor
pnpm pkg:version major
pnpm pkg:version 1.2.3
```

--------------------------------

### Theme Switching Logic

Source: https://github.com/itsjavi/storylite/blob/main/packages/storylite/index.html

This JavaScript code handles the application's theme switching logic, reading the theme from local storage and applying it to the document element.

```javascript
;(() => { try { const root = document.documentElement
const theme = localStorage.getItem('storylite:app-theme')
if (theme === 'light' || theme === 'dark') {
root.dataset.storyliteAppTheme = theme
root.style.colorScheme = theme
} else {
delete root.dataset.storyliteAppTheme
root.style.removeProperty('color-scheme')
}
} catch { document.documentElement.style.removeProperty('color-scheme') } })()
```

--------------------------------

### Preview Document Customization Hooks

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Configuration options for customizing the isolated preview iframe document using hooks.

```typescript
export default defineConfig({
  previewHtmlAttrs: (defaults) => ({ ...defaults, lang: 'en', 'data-preview': 'component' }),
  previewBodyAttrs: { 'data-theme-root': true },
  previewHead: '<meta name="storylite-preview" content="component">',
  previewBodyStart: '<div data-preview-start></div>',
  previewBodyEnd: '<script>window.previewReady = true</script>'
})
```

--------------------------------

### Typecheck the core package

Source: https://github.com/itsjavi/storylite/blob/main/AGENTS.md

Command to typecheck the core StoryLite package.

```sh
pnpm -F @storylite/storylite run typecheck
```

--------------------------------

### Add Scripts to package.json

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Add scripts to your package.json for running StoryLite commands.

```json
{
  "scripts": {
    "storylite": "storylite dev",
    "storylite:build": "storylite build",
    "storylite:preview": "storylite preview"
  }
}
```

--------------------------------

### Pre-PR checks

Source: https://github.com/itsjavi/storylite/blob/main/AGENTS.md

Commands to run before opening a Pull Request to ensure code quality and correctness.

```sh
pnpm typecheck && pnpm format:check && pnpm build && pnpm test
```

--------------------------------

### Supported Built-in Icon Names

Source: https://github.com/itsjavi/storylite/blob/main/README.md

List of supported built-in icon names that can be used for toolbar tools and menu links.

```typescript
;'accessibility' |
  'bug' |
  'external-link' |
  'eye' |
  'flag' |
  'globe' |
  'info' |
  'layout' |
  'monitor' |
  'moon' |
  'paint-bucket' |
  'settings' |
  'sun' |
  'zap'
```

--------------------------------

### StoryLite CLI Commands

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Available StoryLite CLI commands.

```sh
storylite
storylite dev
storylite build
storylite preview
```

--------------------------------

### Default Menu Links

Source: https://github.com/itsjavi/storylite/blob/main/README.md

The default menu links array, which includes an 'About' link.

```typescript
const defaultLinks = [
  {
    id: 'about',
    label: 'About',
    href: 'https://github.com/itsjavi/storylite',
    icon: 'info',
    target: '_blank',
    rel: 'noreferrer',
  },
]
```

--------------------------------

### Manager Document Customization Hooks

Source: https://github.com/itsjavi/storylite/blob/main/README.md

Configuration options for customizing the StoryLite manager chrome document using hooks.

```typescript
export default defineConfig({
  managerHtmlAttrs: (defaults) => ({ ...defaults, lang: 'en', 'data-library': 'components' }),
  managerBodyAttrs: { 'data-shell': 'storylite' },
  managerHead: '<meta name="storylite-project" content="component-library">',
  managerBodyStart: '<script>window.beforeStoryLite = true</script>',
  managerBodyEnd: '<script>window.afterStoryLite = true</script>'
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.