Kitbook: Build, Document, Inspect and Test Svelte Components

on YouTube ↗11m

" summary

Kitbook is a SvelteKit dev route that mounts components from variants exported from sibling .variants.ts and composes multi-component pages via compositions (.composition.svelte) while preserving app i18n and CSS. It supports SSR/CSR toggles, emulates delayed data and mocked callbacks (functions become console logs), and runs visual regression with Playwright via GitHub Actions storing screenshots in Google Cloud Storage. It handles 14 UI languages including RTL, offers live reload, and proposes Vitest HTML diffs for faster PR checks.

AI-written summary · about

" chapters (6)

1. 0:00Introduction to Kitbook
2. 2:13Core features overview
3. 3:42Advanced configuration
4. 5:25Visual regression testing
5. 7:21Deep dive into integration
6. 8:39Viewer features and conclusion

" related talks

• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018
• 02h 57mSvelte Cookbook: A Masterclass on SvelteJSPavel Malyshev · HolyJS Piter 2019
• 14mBuilding a component library with React, Vue, Angular or WebComponentsNorbert de Langen · Frontend Developer Love 2018
• 10mBehavioral Testing with SvelteKitDavid Hunt · Svelte Summit Fall 2024
• 27mBuilding a Maintainable UI with StorybookNorbert de Langen · ReactNext 2018
• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 13mElevating the DX of using Storybook for SvelteMateusz Kadlubowski · Svelte Summit Fall 2024
• 24mFrom Sketch to Code Designing a Component KitSamantha Bretous · Chain React 2018