Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alessiogr/sveltescape
A stunning storybook alternative made with Svelte for Svelte
https://github.com/alessiogr/sveltescape
devtools storybook svelte sveltekit
Last synced: 3 months ago
JSON representation
A stunning storybook alternative made with Svelte for Svelte
- Host: GitHub
- URL: https://github.com/alessiogr/sveltescape
- Owner: AlessioGr
- License: mit
- Created: 2023-01-02T22:56:04.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T23:18:14.000Z (about 2 years ago)
- Last Synced: 2024-10-26T02:35:20.065Z (3 months ago)
- Topics: devtools, storybook, svelte, sveltekit
- Language: Svelte
- Homepage: https://story.bonfireleads.com/
- Size: 142 KB
- Stars: 31
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
SvelteScape is a Storybook alternative made for Svelte. Its goal is to also allow managing very complex components, as seen in the [Shapes](https://story.bonfireleads.com/ShapesInteractive) example.
## Showcase
https://user-images.githubusercontent.com/70709113/212435844-f3848a97-0b75-4bb8-8684-59e039e26cc0.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](https://github.com/AlessioGr/sveltescape/blob/master/src/lib/storyconfigs/Shapes.ts) => [Result](https://story.bonfireleads.com/Shapes)
- 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:
```bash
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:
```bash
pnpm run build
```