Studio UI Design
v0.0.1 — Early Access

Build Data-Driven UIs

A TypeScript-based component library designed for no-code/low-code platforms. Define your UI as JSON schemas and render them anywhere.

View Examples GitHub

ViewSchema

Define your UI as data. Render anywhere.

Key Features

Built specifically for developers building no-code/low-code platforms

🔗

Data-Driven

Define entire UIs using JSON schemas that can be stored, transmitted, and rendered anywhere.

🎨

Theme Tokens

Use semantic tokens like $colors.primary and $spacing.md for consistent, themeable designs.

⚡

State-Based Styling

Define hover, active, focus, and custom states directly in your schema.

🧱

Recursive Rendering

Nest components infinitely with full support for complex layouts.

Schema Example

Define your UI components as plain JSON objects. Use theme tokens for colors and spacing.

59 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Live Preview

See your schemas render in real-time with full state support.

Card Title

This is the card description text.

Interactive Demo

All rendered with ViewSchema components

Counter

0

Button Variants

Flex Layout

1
2
3

Ready to Build?

Start building your data-driven UI today with Studio UI Design.

View Examples
Studio UI Design — Built with Svelte 5, TypeScript, and Tailwind CSS v4