# layercake

> graphics framework for sveltejs

Latest version **11.0.0** (published 2026-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install layercake
pnpm add layercake
yarn add layercake
bun add layercake
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 11.0.0 |
| Published | 2026-09-06 |
| First published | 2017-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 237.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1793 |
| Maintainers | mhkeller0 |

## Links

- npm: https://www.npmjs.com/package/layercake
- Repository: https://github.com/mhkeller/layercake
- Homepage: https://layercake.graphics/
- Issues: https://github.com/mhkeller/layercake/issues
- npm.io page: https://npm.io/package/layercake

## Dependencies (4)

- [d3-array](https://npm.io/package/d3-array.md) ^3.2.4
- [d3-color](https://npm.io/package/d3-color.md) ^3.1.0
- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [d3-shape](https://npm.io/package/d3-shape.md) ^3.2.0

## Recent versions

- 11.0.0 (latest) — 2026-09-06
- 10.0.3 — 2026-07-11
- 10.0.2 — 2025-09-23
- 10.0.1 — 2025-08-24
- 10.0.0 — 2025-08-19
- 9.0.0 — 2025-07-25
- 8.4.4 — 2025-07-24
- 8.4.3 — 2025-03-20
- 8.4.2 — 2024-10-31
- 8.4.1 — 2024-10-31
- 8.4.0 — 2024-10-19
- 8.4.0-beta.1 — 2024-08-28
- 8.3.4 — 2024-06-28
- 8.3.3 — 2024-06-23
- 8.3.2 — 2024-06-23
- … 62 more at https://npm.io/package/layercake/versions

## README

Layer Cake  [<img src="https://raw.githubusercontent.com/mhkeller/layercake.graphics/main/static/layercake-logo-500x400.png" width="115" align="right" alt="layercake-logo">](https://mhkeller.github.io/layercake)
===

> a headless visualization framework for mostly-reusable graphics with [svelte](https://github.com/sveltejs/svelte)

[![Tests badges](https://github.com/mhkeller/layercake/actions/workflows/node.js.yml/badge.svg)](https://github.com/mhkeller/layercake/actions/workflows/node.js.yml) [![npm version](https://img.shields.io/npm/v/layercake.svg)](https://npmjs.org/package/layercake) [![npm](https://img.shields.io/npm/dm/layercake.svg)](https://www.npmjs.com/package/layercake)

 🍰 [See examples](https://layercake.graphics)
 🍰 [Read the guide](https://layercake.graphics/guide)
 🍰 [API docs](https://layercake.graphics/guide#layercake-props)
 🍰 [View the Component Gallery](https://layercake.graphics/components)
 🍰 [Try the starter template](https://github.com/mhkeller/layercake-template)

## Svelte versions

Since v11, the library and the examples use runes instead of the Svelte store API. See the [v10 documentation archive](https://mhkeller.github.io/layercake-v10) for examples of those components.

## Install

```sh
npm install --save layercake
```

## Example

```svelte
<script>
  // 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 }
  ];
</script>

<style>
  .chart-container {
    width: 100%;
    height: 500px;
  }
</style>

<div class="chart-container">
  <LayerCake
    x='x'
    y='y'
    {data}
  >
    <Svg>
      <AxisX/>
      <AxisY/>
      <Line stroke='#f0c'/>
    </Svg>

    <Canvas>
      <Scatter fill='#0fc'/>
    </Canvas>

    <Html>
      <Labels/>
    </Html>
  </LayerCake>
</div>
```

## License

MIT

---
_Source: https://npm.io/package/layercake · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
