DOCSEARCHbyAlgolia
Submit Docs

Ladle

website·Indexed 34 days ago

https://ladle.dev/

A tool for developing and testing React components in an isolated environment using stories. It features built-in support for MSW v2, MDX, TypeScript, and integration with Playwright for visual snapshots and test automation.

Tokens
13.2K
Snippets
79
Records
110
Agent score
68%

What's inside Ladle

  1. Overview of Ladle as a Storybook alternative

    Ladle is a high-performance tool for building and testing React components using the Component Story Format (CSF). It is designed as a faster, more lightweight alternative to Storybook, leveraging Vite and SWC for rapid development and execution.

  2. Overview of Ladle for React component development

    Ladle is a high-performance tool for building and testing React components using Component Story Format (CSF) stories. It is designed as a fast, user-friendly alternative to Storybook, leveraging Vite and SWC for its build pipeline to ensure rapid development cycles.

  3. Overview of Ladle for React component development

    Ladle is a high-performance tool used for building and testing React components using the Component Story Format (CSF). It is designed as a fast, user-friendly alternative to Storybook, leveraging Vite and SWC for its build pipeline to ensure rapid development cycles.

  4. Overview of Ladle for React component development

    Ladle is a tool for developing and testing React components in an isolated environment. It is designed as a drop-in replacement for Storybook and supports the Component Story Format (CSF), meaning it works with existing Storybook stories. Unlike Webpack-based tools, Ladle is built on Vite and esbuild, serving modules directly to the browser to significantly reduce startup times, build times, and bundle sizes. Key features include built-in support for controls, links, dark theme, RTL, preview mode, and React Fast Refresh.

  5. Overview of Ladle for React component development

    Ladle is a high-performance tool for building and testing React components using the Component Story Format (CSF). It is designed as a fast, user-friendly alternative to Storybook, leveraging Vite and SWC for its build pipeline to ensure rapid development cycles.

  6. Overview of Ladle for React component development

    Ladle is a drop-in alternative to Storybook designed for developing and testing React components in an isolated environment. It leverages Vite to serve modules directly to the browser, skipping the bundling step during development to ensure instant server starts regardless of the number of components. For production, it uses Rollup to create optimized bundles that are significantly smaller than Storybook's (e.g., 250KB vs 5.1MB for a baseline project). Additionally, Ladle automatically code-splits each story to maintain fast load times as the component library grows.

  7. Understand Ladle's performance and build architecture

    Ladle is powered by Vite and uses esbuild. It leverages ES modules and code-splitting to provide Hot Module Replacement (HMR) and Fast Refresh for each individual story, ensuring a fast and small footprint.

  8. Understand Ladle compatibility and supported features

    Ladle is compatible with the Component Story Format (CSF) and Controls. It provides built-in support for links, themes, right-to-left (RTL) layouts, source code inspection, accessibility testing (via axe), TypeScript, and Flow.

  9. Ladle v3 New Features and Requirements

    Ladle v3 introduces several core updates to improve performance and compatibility:

    • Default Compiler: SWC (Speedy Web Compiler) is now the default, replacing Babel for React and TypeScript transformations. This results in 2x faster production builds and faster startup/incremental builds. Users can revert to @vite/plugin-react if needed.
    • Node.js Support: Official support for Node v18 and v20. Node v16 is deprecated.
    • React Support: React 18+ is supported. React v17 is deprecated.
    • New Capabilities:
      • Added MDX stories and markdown compatibility.
      • Streamlined method for mocking dates within stories.
      • Global hotkeys for navigation.
      • Global args and argTypes.
      • Specialized background adjustment controls.
      • storyOrder feature for customizing story sequences.
      • HTTP/2 support to optimize module loading.
    • Type Improvements: StoryDefault and Meta are now interfaces, allowing for extensions. Enhanced TypeScript types via the satisfies operator.

  10. Enable HTTP/2 in Ladle to improve dev server performance

    Ladle is powered by Vite and serves modules individually. For stories importing hundreds or thousands of modules, HTTP/2 significantly boosts performance by allowing multiple requests and responses over a single connection, reducing browser slowdowns. Enabling HTTP/2 requires a valid SSL certificate configured in the Vite server settings.

  11. Understand Ladle's core architectural features

    Ladle includes several built-in behaviors for performance and developer experience:

    • URL State Persistence: All addon states are persisted in the URL, allowing for easy sharing and testing of specific story states.
    • No Iframes: Ladle is a single application without iframes, which results in faster builds, smaller bundles, and easier debugging via browser Elements tools.
    • Code Splitting: Stories are code-split by default.
    • Fast Refresh: React Fast Refresh is enabled by default.
    • Responsive Testing: There is no dedicated viewport addon; users should use browser developer tools for responsive testing.

  12. Configure Styled-components for Ladle

    While styled-components work out of the box, it is highly recommended to install the SWC plugin for better performance and behavior. Configure this in vite.config.js using @vitejs/plugin-react-swc.
    pnpm add styled-components @swc/plugin-styled-components @vitejs/plugin-react-swc
    // vite.config.js
import react from "@vitejs/plugin-react-swc";

export default {
  plugins: [
    react({
      plugins: [["@swc/plugin-styled-components", {}]],
    }),
  ],
};