SvelteScape is a Storybook alternative made for Svelte. Its goal is to also allow managing very complex components, as seen in the Shapes example.

Showcase

CleanShot.2023-01-14.at.00.11.31.mp4

Unique features

• Allows more complex data structures to be managed
• Optional prop pre- and post-processors, to move load from the svelte component to SvelteScape. Very useful in the shapes example, so you do not have to ship an entire SVG curve generator with negative runtime performance benefits. Instead, this generates the svg paths via the postprocessor. Do more calculations in sveltescape and less in production! => Example => Result
• Made 100% in svelte & sveltekit - for svelte / sveltekit
• SvelteScape stories are defined in separate ts config files => nothing needs to be changed or added into your actual .svelte component files. They stay clean & separated!

How to use

Stories/components are currently intermingled with sveltescape in order to allow easier development & testing of sveltescape. Pretty much just follow those examples.

Developing

Once you've created a project and installed dependencies with pnpm install, start a development server:

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

Building

To create a production version of your app:

pnpm run build