{"id":11229,"library":"layercake","title":"LayerCake Svelte Graphics Framework","description":"LayerCake is a lightweight, opinionated graphics framework designed for building highly customizable and reusable data visualizations with Svelte. It emphasizes a clear separation between the data layering, scaling, and rendering logic, allowing developers to bring their own Svelte components for charts and annotations. The current stable version is 10.0.2, with major versions released somewhat frequently to align with Svelte's evolution (e.g., Svelte 5 'Runes' support in v9/v10). Key differentiators include its Svelte-native component approach, making it highly composable and performant within a Svelte application, and its flexibility in rendering to SVG, HTML, or Canvas elements without dictating visual styles.","status":"active","version":"10.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/mhkeller/layercake","tags":["javascript","typescript"],"install":[{"cmd":"npm install layercake","lang":"bash","label":"npm"},{"cmd":"yarn add layercake","lang":"bash","label":"yarn"},{"cmd":"pnpm add layercake","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core UI framework for LayerCake components.","package":"svelte","optional":false},{"reason":"Used for type checking and development, as LayerCake ships with types.","package":"typescript","optional":true}],"imports":[{"note":"The main wrapper component is a named export. It is not a default export.","wrong":"import LayerCake from 'layercake';","symbol":"LayerCake","correct":"import { LayerCake } from 'layercake';"},{"note":"ESM named import is the standard for Svelte components. CommonJS `require` is not typically used for Svelte component imports directly.","wrong":"const Svg = require('layercake').Svg;","symbol":"Svg","correct":"import { Svg } from 'layercake';"},{"note":"Common layout components like `Html` and `Canvas` are named exports. Do not append 'Component' to their names.","wrong":"import { HtmlComponent } from 'layercake';","symbol":"Html","correct":"import { Html } from 'layercake';"}],"quickstart":{"code":"\n\n\n\n
\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n
","lang":"typescript","description":"This example demonstrates how to set up a basic LayerCake chart using `LayerCake` as the primary wrapper, and rendering different chart elements to `Svg`, `Canvas`, and `Html` containers. It also shows how to define accessor functions for data properties."},"warnings":[{"fix":"Review your `Svg` component usage. The `innerElement` binding is no longer available. Most use cases for this binding might be achievable through direct DOM manipulation within Svelte or by rethinking the component structure.","message":"LayerCake v10.0.0 removed the `innerElement` binding from the `Svg` component. If you were relying on this binding, your code will break.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Consult the v9.0.0 changelog. Ensure your Svelte setup supports Runes, and update any custom components that interact with layout or domain sorting. If using Svelte 3 or 4, stick to LayerCake v8.4.4 or older.","message":"LayerCake v9.0.0 introduced breaking changes related to sorting domains and updated layout components to use Svelte 5 'Runes' syntax. This may require updates to custom layout components and how domains are handled.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"If you require unsorted ordinal domains in v8.0.0, you will need to upgrade to v8.1.0 or newer and use the new option to disable sorting. For earlier versions, review the changelog for `sorted` prop usage.","message":"LayerCake v8.0.0 changed default behavior for ordinal domains, sorting them by default. This was later made optional in v8.1.0.","severity":"breaking","affected_versions":"8.0.0"},{"fix":"If targeting Svelte 5, use LayerCake v9.0.0 or higher. If you need Svelte 3 or 4 compatibility, explicitly install `layercake@8.4.4`. Consult the `layercake-prerunes` documentation archive for Svelte 3/4 examples.","message":"LayerCake versions 9.0.0 and above are primarily designed for Svelte 5 and utilize Svelte's 'Runes' syntax. Earlier versions (up to 8.4.4) are compatible with Svelte 3 and Svelte 4.","severity":"gotcha","affected_versions":">=9.0.0"},{"fix":"Familiarize yourself with Svelte's context and slot prop mechanisms. The LayerCake examples and guide extensively demonstrate their usage for passing scales, dimensions, and data down the component tree.","message":"LayerCake relies heavily on Svelte's context API and slot props for component composition. Understanding these Svelte features is crucial for effective use.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Downgrade LayerCake to `8.4.4` to maintain compatibility with Svelte 3/4: `npm install layercake@8.4.4`.","cause":"Attempting to use LayerCake v9.0.0 or higher with Svelte 3 or Svelte 4. LayerCake v9+ uses Svelte 5 Runes, which are incompatible with older Svelte versions.","error":"Error: 'Component' is not a constructor (when importing LayerCake components in a Svelte 3/4 project with LayerCake v9+)"},{"fix":"Ensure your custom component is nested within a LayerCake layout component (``, ``, ``) and that you are correctly receiving context values via `getContext` or using `let:xScale` on the slot if it's exposed that way, as shown in the LayerCake examples.","cause":"A custom chart component is trying to access `xScale` from LayerCake's context, but it's not being provided, likely due to incorrect placement or missing `let:` slot prop definitions.","error":"TypeError: Cannot read properties of undefined (reading 'xScale') in a custom chart component."},{"fix":"Prefer ESM `import { ... } from 'layercake';` syntax. If you are forced to use CommonJS, ensure your build setup correctly handles ESM imports (e.g., Babel or Webpack configured with `esm` support or consider dynamic `import('layercake')`).","cause":"LayerCake is published as an ESM-first package, and directly `require()`ing it in a pure CommonJS environment might fail without proper transpilation or configuration.","error":"SyntaxError: Unexpected token 'export' (when trying to `require('layercake')` in a CommonJS environment)"}],"ecosystem":"npm"}