Storybook vs Histoire vs Ladle: pilih tool yang worth overhead-nya

TL;DR

• Storybook: Recommended untuk team dengan design system serius atau need Chromatic integration. Overhead-nya ada, tapi worth untuk use case ini.
• Histoire: Recommended untuk project Vue 3 + Vite yang mau setup ringan tanpa Storybook complexity.
• Ladle: Recommended untuk solo dev atau small team React yang butuh component isolation cepat tanpa config drama.

Konteks 2026

Di 2026, component-driven development bukan lagi privilege design system team di unicorn. Framework seperti Astro, SvelteKit, dan Next.js 15 dengan RSC udah bikin boundary antar component makin penting. Tapi tools untuk develop dan document component ini belum semua worth overhead-nya untuk skala SMB Indonesia.

Storybook adalah incumbent. Histoire naik sebagai Vue-first alternative. Ladle muncul sebagai antitesis: zero config, fast, dan opinionated “cukup”. Pertanyaannya bukan tool mana yang terbaik secara absolut, tapi tool mana yang worth biaya operasionalnya untuk skala dan tim lo.

Saya pakai ketiganya:

• Storybook: 3 project (2 React, 1 internal design system)
• Histoire: 1 project Vue 3 SaaS internal
• Ladle: 2 project React solo dev / small team

Perbandingan

Kriteria	Storybook v8	Histoire	Ladle
Setup time	20-40 menit	15-20 menit	5-10 menit
Bundle size (dev server)	Besar (~50MB node_modules tambahan)	Medium (~20MB)	Kecil (~8MB)
Framework support	React, Vue, Angular, Svelte, dll	Vue 3 + Vite (React ada, tapi minor)	React (utama), beberapa framework lain
Ecosystem/addon	Terlengkap (a11y, Chromatic, Figma)	Minimal tapi cukup	Minimal, opinionated
Visual regression	Via Chromatic (berbayar)	Tidak built-in	Tidak built-in
Update breaking change	Frequent (tiap major)	Stabil	Stabil
Harga Chromatic	Gratis 5K snapshot/bulan, berbayar setelahnya	N/A	N/A
Cocok untuk	Design system, team besar, Chromatic user	Vue 3 + Vite project	Solo dev, React isolasi cepat

Storybook v8

Storybook di 2026 sudah jauh lebih baik dari versi 6-7 yang terkenal berat dan config-heavy. Migrasi ke Vite-first dan penghapusan beberapa legacy addon bikin startup time lebih masuk akal. Tapi “lebih baik dari sebelumnya” tidak berarti ringan — ini tetap tool yang paling kompleks dari tiga ini.

Yang Storybook masih unggul jauh adalah ekosistem. Chromatic untuk visual regression, addon accessibility (@storybook/addon-a11y), integrasi Figma, MSW (Mock Service Worker) untuk mock API — semua ini ada dan mature. Kalau tim lo butuh satu tool yang bisa jadi “source of truth” component untuk dev + designer + QA, Storybook masih satu-satunya yang bisa dipercaya untuk ini.

Kelemahan nyata: maintenance cost. Setiap major update Storybook, ada risiko addon yang belum kompatibel. Di monorepo, Storybook sering butuh special treatment. Untuk team Indonesia yang developer-nya lean dan tidak ada dedicated tooling engineer, cost ini nyata — bukan cuma waktu setup tapi juga waktu debugging ketika hal random break setelah npm update.

Catatan Indonesia: Chromatic berbayar dalam USD. Untuk SMB dengan 50K+ component snapshot/bulan, ini bisa $149-299/bulan. Bukan angka kecil untuk startup pre-revenue.

Histoire

Histoire adalah jawaban komunitas Vue untuk “Storybook terlalu berat”. Dibuat oleh Guillaume Chau (maintainer Vue Devtools), Histoire dibuat dari awal untuk Vue 3 + Vite — bukan port atau adapter.

DX-nya untuk Vue 3 sangat clean. Syntax Story di Histoire pakai Vue SFC langsung, tidak perlu belajar CSF (Component Story Format) ala Storybook. Kalau lo sudah terbiasa nulis Vue, belajar Histoire butuh 30 menit, bukan beberapa jam.

<script setup lang="ts">
import { logEvent } from 'histoire/client'
import MyButton from './MyButton.vue'
</script>

<template>
  <Story title="MyButton">
    <Variant title="Default">
      <MyButton label="Klik saya" @click="logEvent('click', $event)" />
    </Variant>
    <Variant title="Disabled">
      <MyButton label="Tidak aktif" :disabled="true" />
    </Variant>
  </Story>
</template>

Kelemahannya: kalau project lo punya kebutuhan visual regression, Chromatic-style sharing, atau a11y audit built-in — Histoire belum ada. Ini bukan showstopper untuk internal use, tapi kalau lo perlu sell component quality ke stakeholder non-dev, Histoire tidak punya “presentasi” yang sekuat Storybook.

Catatan: jangan pakai Histoire untuk project React. Support-nya ada tapi community-nya sangat kecil, dan setiap update Vue-centric feature bisa break perilaku React stories.

Ladle

Ladle adalah opinionated minimalis. Dibuat oleh Vite contributor, Ladle pakai format CSF yang sama dengan Storybook (bisa migrate story dengan perubahan minimal), tapi tanpa config boilerplate, tanpa addon system yang kompleks, dan startup time yang jauh lebih cepat.

Untuk solo dev React yang butuh component isolation tanpa ceremony, Ladle adalah the answer. npx ladle serve dan lo sudah punya environment isolasi component dalam hitungan menit. Build untuk static deploy juga trivial.

// Button.stories.tsx — format identik dengan Storybook CSF
import type { Story } from '@ladle/react';
import { Button } from './Button';

export const Default: Story = () => <Button>Klik saya</Button>;
export const Disabled: Story = () => <Button disabled>Tidak aktif</Button>;

Trade-off yang jelas: Ladle tidak punya addon ecosystem. Tidak ada a11y checker built-in, tidak ada Chromatic, tidak ada design token integration. Ini bukan kekurangan yang perlu di-fix Ladle — ini adalah deliberate scope limitation. Kalau lo butuh hal-hal tersebut, Ladle bukan tool yang tepat.

Keuntungan lain: karena story format-nya CSF, kalau suatu saat project berkembang dan lo butuh migrate ke Storybook, effort-nya minimal. Ladle bisa jadi “Storybook training wheels” yang tidak mengunci lo.

Verdict

Pakai Storybook kalau:

• Tim >= 3 dev dan ada design team yang perlu akses component
• Butuh visual regression testing (Chromatic)
• Project adalah design system yang di-publish atau di-share ke multiple project
• Butuh a11y audit built-in sebagai bagian CI

Pakai Histoire kalau:

• Stack lo adalah Vue 3 + Vite
• Tidak butuh visual regression eksternal
• Tim kecil (1-3 dev) yang mau setup ringan tapi tetap punya documentation component

Pakai Ladle kalau:

• Solo dev atau pair programming, project React
• Butuh component isolation cepat tanpa overhead config
• Project internal, tidak perlu sharing ke non-dev
• Mau opsi migrate ke Storybook nanti tanpa rewrite stories

Skip ketiganya kalau:

• Project lo adalah simple landing page atau minimal interactive SaaS — component isolation tool untuk < 20 component itu overkill, cukup pakai dev environment dengan hot reload biasa.

Untuk konteks Indonesia: kalau budget tim lo terbatas dan tidak ada dedicated tooling engineer, saya rekomendasikan mulai dengan Ladle (React) atau Histoire (Vue 3). Keduanya solve the core problem — isolate dan develop component — tanpa menguras waktu setup dan maintenance yang sebetulnya bisa dipakai untuk ship fitur.