Setting up OpenBridge with Svelte

Install

npm install @oicl/openbridge-webcomponents

The @oicl/openbridge-webcomponents-svelte wrappers are auto-generated and published alongside; install if you prefer typed Svelte components.

Global setup

In your entry (+layout.svelte for SvelteKit, or App.svelte):

<script>
  import '@oicl/openbridge-webcomponents/dist/openbridge.css';
  import '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
</script>

Theme + size on HTML:

<html data-obc-theme="day">
  <body class="obc-component-size-regular">
    ...
  </body>
</html>

First render

Svelte lets you use the web component tag directly:

<script>
  let value = 50;
</script>

<obc-slider
  min="0"
  max="100"
  value={value}
  on:value={(e) => (value = e.detail.value)}
></obc-slider>

Compiler config

Svelte understands custom elements natively — no compiler flag needed. If TypeScript complains about unknown tags, add an ambient module declaration or use the typed wrapper package.

Theme switching

Valid themes: day, dusk, night, bright.