JSON Form Builder

Appearance

Theming ​

The builder UI is built with Tailwind CSS and the shadcn-vue design system. You can customize its appearance using CSS custom properties, Tailwind configuration, and dark mode support.

CSS Custom Properties ​

The builder uses CSS custom properties from the shadcn-vue design system for all colors. Override these on the :root or on the builder container to change the color scheme:

css
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
}

These values use the HSL color space without the hsl() wrapper, which is how shadcn-vue expects them. Tailwind utility classes like bg-background, text-foreground, border-border reference these variables.

Example: Blue Theme ​

css
:root {
  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;
  --ring: 221 83% 53%;
}

Example: Scoping to the Builder ​

If you only want to theme the builder without affecting the rest of your app:

css
.jfb-builder {
  --primary: 160 84% 39%;
  --primary-foreground: 0 0% 100%;
  --accent: 160 84% 95%;
  --accent-foreground: 160 84% 20%;
}

Tailwind Config Customization ​

The builder uses standard Tailwind utility classes. You can extend your Tailwind config to customize spacing, typography, and other design tokens:

ts
// tailwind.config.ts
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        'builder-sm': '0.8125rem',
        'builder-xs': '0.6875rem',
      },
    },
  },
}

Dark Mode ​

The builder supports dark mode through CSS custom properties. Define dark mode overrides under a .dark class or prefers-color-scheme media query:

css
.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
}

Toggle dark mode by adding or removing the dark class from the <html> or a parent element:

ts
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark')
}

If your Tailwind config uses darkMode: 'class', the builder's Tailwind utilities respond to the .dark class automatically.

Customizing Component Styles ​

Palette ​

The component palette uses bg-card for its background and border-border for its borders. Override the card variables to change its appearance, or add custom CSS:

css
/* Wider palette */
.jfb-builder {
  grid-template-columns: 320px 1fr 320px;
}

/* Palette item hover effect */
.jfb-builder .palette-item:hover {
  background-color: hsl(var(--accent));
  transform: translateX(2px);
}

Canvas ​

The canvas area uses bg-background with a subtle drop-zone indicator when dragging:

css
/* Custom drop zone indicator */
.jfb-builder .builder-canvas [data-drop-active="true"] {
  outline: 2px dashed hsl(var(--primary));
  outline-offset: 2px;
}

Property Panel ​

The property panel appears on the right side. Style its tabs and form controls:

css
/* Property panel header */
.jfb-builder .property-panel-header {
  border-bottom: 2px solid hsl(var(--primary));
}

Toolbar ​

The builder toolbar sits above the canvas and contains undo/redo, zoom, and export buttons:

css
/* Toolbar background */
.jfb-builder .builder-toolbar {
  background-color: hsl(var(--muted));
}

Using a Custom Font ​

css
.jfb-builder {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.jfb-builder code,
.jfb-builder pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

Builder Layout Dimensions ​

The FormBuilder component uses a CSS Grid with three columns. You can adjust the column widths:

css
/* Default: 280px | 1fr | 320px */
.jfb-builder {
  grid-template-columns: 280px 1fr 320px;
}

/* Wider palette, narrower properties */
.jfb-builder {
  grid-template-columns: 320px 1fr 280px;
}

/* Responsive: collapse panels on small screens */
@media (max-width: 1024px) {
  .jfb-builder {
    grid-template-columns: 1fr;
  }
}