Layer Cake layercake-logo

a framework for mostly-reusable graphics with svelte

🍰 See examples 🍰 Read the guide 🍰 API docs 🍰 View the Component Gallery 🍰 Try the starter template

Svelte versions

Works Svelte 3 and Svelte 4


npm install --save layercake


  // The library provides a main wrapper component
  // and a bunch empty layout components...
  import { LayerCake, Svg, Html, Canvas } from 'layercake';

  // ...that you fill with your own chart components,
  // that live inside your project and which you
  // can copy and paste from here as starting points.
  import AxisX from './components/AxisX.svelte';
  import AxisY from './components/AxisY.svelte';
  import Line from './components/Line.svelte';
  import Scatter from './components/Scatter.svelte';
  import Labels from './components/Labels.svelte';

  const data = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }];

  .chart-container {
    width: 100%;
    height: 500px;

<div class="chart-container">
      <Line color='#f0c'/>

      <Scatter color='#0fc'/>




Top categories

Loading Svelte Themes