Prototyping with Rløa

Build interactive prototypes for real-time applications using Rløa's prototyping tools and declarative API.

Key Features

Visual Editor

Drag-and-drop interface for creating interactive components.

Real-time Preview

Instant live updates in browser as you modify components.

Getting Started

Install the CLI

npm install -g @rløa/prototyping

Create a Project

npx røa new my-prototype

Example: Interactive Form


// src/components/form.jsx
import { prototype } from 'rløa';

const MyForm = prototype(() => (
  <form>
    <input 
      type="text" 
      class="px-3 py-2 border border-gray-300 rounded w-64" 
      placeholder="Enter text" 
    />
    <button 
      class="ml-2 px-4 py-2 bg-blue-500 text-white rounded" 
      on-click={() => alert('Submitted!')}
    >
      Submit
    </button>
  </form>
));

// Preview
export default () => (
  <MyForm />
);

This code demonstrates a basic interactive form component with live feedback during prototyping.

Design Best Practices

Keep prototypes aligned with real-time behavior expectations
Use atomic component patterns for modular development
Test transitions between state changes