DevelopersSvelte

Svelte SDK

Embed published RuleCMS widgets in Svelte

Svelte 5 hosts use @rulecms/widget-svelte and the default card library. Publish from the composer, drop in a published key, and keep SvelteKit as the app.

Getting started guide →

Install and embed

Add @rulecms/widget-svelte and render a published widget.

install.shBash
npm install @rulecms/widget-svelte @rulecms/source-components-svelte
HomepageHero.svelteTS
<script>  import { RuleCMSWidget } from "@rulecms/widget-svelte";  const publishedKey = "your-widget-key";</script><RuleCMSWidget {publishedKey} />

Svelte is enough to ship the journey

No React rewrite required to compose, publish, and embed.

RuleCMS is the content system. Svelte is the host. Editors still drag components, preview per device, and promote through three environments. You install the official packages, register the default cards, and render RuleCMSWidget. Peer dependency: Svelte 5.

The Svelte SDK renders the basic RuleCMS set — text, images, video, icons, buttons, dividers, embeds, lists, and accordions. That is a complete path for most marketing and product surfaces. Custom component libraries in the composer are a React capability. Stay on Svelte if that is the app you sell; use React only when you need the composer to host your own design system.

Provider and widget

Svelte props, same published key as every other SDK.

Register @rulecms/source-components-svelte as libraries.default. The widget package does not ship UI cards on its own — the source-components package is what paints text, media, and buttons.

HomepageHero.svelteTS
<script>  import { RuleCMSWidget, RuleCMSWidgetProvider } from "@rulecms/widget-svelte";  import * as sourceComponents from "@rulecms/source-components-svelte";  const token = "your-environment-token";  const publishedKey = "your-widget-key";  const libraries = { default: sourceComponents };  const componentProps = {    "b721c4e2-…": { onClick: (event) => console.log("cta", event) },  };</script><RuleCMSWidgetProvider {token} {libraries}>  <RuleCMSWidget {publishedKey} {componentProps} /></RuleCMSWidgetProvider>

Environments and pre-fetched data

  • Staging and production: plain token + environmentId---widget-… published key.
  • Development: dev. token + draft widget key for live drafts.

On SvelteKit, fetch with fetchRuleCMSWidget in a load function and pass initialData with mode="pre-fetched". The client skips the refetch. CSS breakpoint variants keep the first HTML aligned with every viewport.

fetch-widget.tsTS
import { fetchRuleCMSWidget } from "@rulecms/widget-svelte";const data = await fetchRuleCMSWidget({  publishedKey: process.env.RULECMS_PUBLISHED_KEY,  token: process.env.RULECMS_TOKEN,});

Token docs: projects, environments, and tokens. The Svelte sample lab is a public teaching project with a live demo.

Callbacks from a published button

componentProps lets a published r-button call into your Svelte app — open a booking modal, push a route, start checkout. Key by column id or by a path of enclosing collection columns. Longest match wins. Development logs a missing key once so the id in the composer and the id in your map stay in sync.

Packages

Install from the public registry. These are the supported SDK surfaces — not GitHub source repos.

Sample labs

Public teaching projects that show the integration pattern. Copy the wiring, not the app architecture — they are not production starters.

Svelte sample lab

Svelte 5 lab for the provider, default cards, and a published key.

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.

Other SDKs

Same published widgets and environment tokens. Pick the guide for the stack you ship.

Explore RuleCMS

Dive deeper into what makes RuleCMS different.

Ship Svelte with RuleCMS

Create a project, provision three environments, and copy a scoped API token.