@instio/svelte
v0.1.5
Published
The official Svelte rendering engine for Instio. This package consumes the Instio DSL (generated by `@instio/core`) and dynamically renders a beautiful, accessible, and responsive user interface using Svelte 5.
Readme
@instio/svelte
The official Svelte rendering engine for Instio. This package consumes the Instio DSL (generated by @instio/core) and dynamically renders a beautiful, accessible, and responsive user interface using Svelte 5.
Theming & Styling
Instio ships with a robust Three-Tier Design Token Architecture designed for maximum flexibility and out-of-the-box parity with standard AI application UI design.
1. Light and Dark Mode
Instio automatically respects the user's system preferences (prefers-color-scheme).
- Light mode is driven by the
:rootpseudo-class. - Dark mode overrides are cleanly housed under the
.darkclass on the<html>element. Our renderer handleslocalStoragecaching and flash-of-unstyled-content (FOUC) prevention automatically.
4. Theming
Built-in Themes
Instio supports declaring themes directly in the DSL configuration:
import { instio } from "@instio/core";
const app = instio({ theme: "soft" }, (ui) => { // base | default | origin | citrus | monochrome | soft | glass | ocean | skeuomorphic
// ...
});This injects a data-theme attribute into the app wrapper, enabling CSS overrides.
Custom CSS Overrides
Because Instio applications are built with Vite, you can easily inject your own CSS to override variables or add custom styling!
Just create a style.css (or user.css) next to your app.js file:
/* my-app/src/style.css */
:root[data-theme="soft"] {
/* Override the soft theme brand color to hot pink */
--primary-500: #ec4899;
--primary-600: #db2777;
}
.my-custom-box {
background: var(--brand-500);
border-radius: var(--radius-md);
}Then, just import it at the top of your app.js entry file:
// my-app/src/app.js
import { instio } from "@instio/core";
import "./style.css"; // Your custom styles!
const app = instio((ui) => {
ui.html({ value: "<div class='my-custom-box'>Hello!</div>" });
});Vite will automatically bundle and inject your CSS alongside the built-in Instio themes.
CSS Custom Properties Reference
Core Tokens
These are the foundational scales:
- Neutral Palette:
--neutral-50through--neutral-950 - Primary Palette:
--primary-50through--primary-950 - Spacing Scale:
--spacing-xs,--spacing-sm,--spacing-md,--spacing-lg,--spacing-xl,--spacing-xxl - Typography Scale:
--text-xs,--text-sm,--text-md,--text-lg,--text-xl,--text-xxl - Font Weights:
--font-weight-light,--font-weight-normal,--font-weight-semibold,--font-weight-bold - Border Radius:
--radius-sm,--radius-md,--radius-lg
Semantic Aliases
If you want to quickly re-theme the app, simply override the semantic aliases:
| Token | Description |
|-------|-------------|
| --brand-500 | The core brand/accent color (used for focus rings, primary buttons, etc.) |
| --bg-app | The outer canvas background |
| --bg-panel | Card and panel backgrounds |
| --bg-surface | Secondary nested surfaces (e.g., inside panels) |
| --border | Universal border color for structural elements |
| --text-primary | Main readable text |
| --text-muted | Helper text and placeholders |
| --input-bg | Background color for form inputs |
| --input-focus | Border color when inputs are focused |
Example override:
/* In your user.css file */
:root {
--brand-500: #10b981; /* Emerald green accent */
--bg-app: #f8fafc;
--radius-md: 4px; /* Sharper corners */
}Component Class Reference
All components render with scoped tio-* CSS classes. You can target these globally if you need advanced visual overrides.
| Class Name | Component |
|------------|-----------|
| .tio-app-header | The top navigation bar containing the logo, title, and theme toggle |
| .tio-app-body | The main content wrapper |
| .tio-row | Layout block for horizontal flow |
| .tio-column | Layout block for vertical flow |
| .tio-group | Panel layout block with borders |
| .tio-btn | Button component |
| .tio-input | Textbox, textarea, and numeric inputs |
| .tio-label | The title/label above form fields |
| .tio-chatbot | The chat interface container |
| .tio-chat-bubble | Individual user or bot messages |
| .tio-accordion | Expandable content sections |
| .tio-tabs__nav | Tab navigation headers |
| .tio-markdown | Rendered markdown blocks and code syntax |