GitHub - Query-Doctor/ladle: 🥄 Develop, test and document your React story components faster.

Ladle is an environment to develop, test, and share your React components faster.

Documentation
Demo
Twitter
StackBlitz
Discord

Quick start

mkdir my-ladle
cd my-ladle
pnpm init
pnpm add @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
pnpm ladle serve

with yarn

mkdir my-ladle
cd my-ladle
yarn init --yes
yarn add @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
yarn ladle serve

with npm

mkdir my-ladle
cd my-ladle
npm init --yes
npm install @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
npx ladle serve

For powershell, replace in the above listings echo with the following

@"
export const World = () => <p>Hey</p>;
"@ | out-file -encoding ASCII src/hello.stories.tsx