Interactive Studio

Live Playground & Studio

Configure every parameter live, dogfood the real package, and generate copyable multi-framework snippets.

Quick Scenario Presets:
Feedback Configuration21 themes loaded
Auto-dismiss Duration4000 ms
Live In-Canvas Simulation
Backdrop:
✓
Deployment Finished
All 24 microservices updated in us-east-1.
Generated Code Snippet
typescript
import { Toaster, toast } from 'toastory/react';
import 'toastory/themes/ios-glass.css';

export default function App() {
  const showFeedback = () => {
    toast.success('Deployment Finished', {
      description: 'All 24 microservices updated in us-east-1.',
      duration: 4000,
      richColors: false,
      invert: false,
      closeButton: true,
      position: 'top-right',
      progress: true,
      action: { label: 'View Telemetry', onClick: () => console.log('Action triggered') },
      cancel: { label: 'Dismiss' },
    });
  };

  return (
    <>
      <Toaster theme="ios-glass" mode="dark" position="top-right" />
      <button onClick={showFeedback}>Trigger Notification</button>
    </>
  );
}