Welcome to Sandboxed

Design. Build. Preview.

Speed up development. Improve maintainability. Share confidently.

Early Development Status

Sandboxed is currently in an unstable state and will have breaking changes. It’s open now to gather feedback from Flutter enthusiasts. If you’re interested in trying it out and providing input, I welcome your participation, but please be aware that APIs and functionality may change significantly as development progresses.

Features

📦 Isolated Development

Develop and test widgets in isolation without the complexity of your full app. Focus on one component at a time to create better UI building blocks.

🎨 Live Preview

See your changes in real-time with hot reload support for faster development. Instantly visualize how parameter changes affect your components.

🧪 Interactive Parameters

Control your widget properties with interactive controls for booleans, colors, numbers, and more. Experiment with different configurations without changing code.

🧩 Built-in Addons

Enhance development with pan, theme switching, safe area visualization, viewport controls, and more tools to perfect your components.

🏷️ Tagging & Search

Organize and find components easily with tags and a searchable component catalog. Navigate your component library efficiently.

📱 Responsive Testing

Test your components across different screen sizes and device orientations. Ensure your UI works perfectly on any Flutter platform.

How It Works

Define Component Meta

Meta get meta => Meta<SandboxButton>(
  name: 'Button',
  module: 'Features / Core',
  component: SandboxButton,
  decorators: [
    Decorator((context, story) => Padding(
      padding: const EdgeInsets.all(16),
      child: story,
    )),
  ],
);

Create Interactive Stories

Story get $Green => Story(
  name: 'Green',
  builder: (context, params) {
    return SandboxButton(
      onPressed: () {},
      title: params.string('title').required("Lorem"),
      color: params.color('color').required(Colors.green),
      size: params.single('size', SandboxButtonSize.values)
                .required(SandboxButtonSize.small),
    );
  },
);

Preview in Sandbox UI

import 'package:sandboxed_sandbox/components.g.dart';

// Run your Sandboxed app to preview all components
void main() {
  runApp(
    const SandboxedApp(
      components: components,
    ),
  );
}

Getting Started

1. Add sandboxed in your pubspec.yaml:

   dependencies:
     sandboxed_core:
     sandboxed:
   dev_dependencies:
     sandboxed_generator:

2. Install dependencies:

   flutter pub get

3. Write Meta and stories

4. Run build_runner (required only when adding, renaming, removing Meta or Story):

   flutter pub run build_runner build

5. Build sandboxed app with generated components

   import 'package:sandboxed_sandbox/components.g.dart';
   
   // Run your Sandboxed app to preview all components
   void main() {
     runApp(
       const SandboxedApp(
         components: components,
       ),
     );
   }

Packages

Sandboxed

Main runtime & viewer UI for your component stories

Learn more →

Core

Core primitives: Meta, Story, Params, and more

Learn more →

Generator

Code generation for story and component registry

Learn more →

UI Kit

UI components used in the viewer interface

Learn more →

Roadmap

Story Preview

URL state & session persistence

Generated markdown docs from source/meta

Param mismatch detection + auto fixes

Local golden test running

Extended param types (select, JSON, code)