Il browser fa il lavoro.
Il documento resta qui.
React e TypeScript per l’editor. SQLite e WebAssembly per leggere il progetto. SVG per rimettere il wireframe davanti ai tuoi occhi.
Dal file alle pagine
Apri un .bmpr dal selettore o trascinalo nell’editor. sql.js legge il database SQLite in memoria. Il modello conserva i dati grezzi e le risorse dell’archivio; le pagine diventano navigabili. Il limite di apertura è 100 MB.
Dalle pagine al canvas
Il renderer interpreta i controlli e li disegna in SVG. rough.js aggiunge uno stile sketch opzionale. Testi, geometrie, immagini incorporate supportate e icone diventano elementi leggibili; i controlli non risolti possono mostrare segnaposto.
Dal canvas alle correzioni
Seleziona uno o più elementi, spostali, ridimensionali e modifica i testi. Usa il pannello proprietà, duplica, cambia l’ordine e annulla o ripeti. I gruppi si modificano come blocchi; non c’è editing dei singoli figli dall’interfaccia.
Dal progetto alla consegna
Esporta la pagina in SVG o PNG. Recupera i testi di tutte le pagine in Markdown, oppure i dati in JSON. Mermaid e draw.io ricostruiscono collegamenti approssimati da controllare. Per una copia .bmpr serve l’attivazione esplicita del salvataggio sperimentale.
Nessun backend per i documenti
Il server dell’app, locale oppure online, consegna HTML, JavaScript, CSS e WebAssembly. Il documento viene aperto ed elaborato dal browser: l’editor non lo carica su un server di conversione. Docker serve l’app tramite Nginx; non occorre montare una cartella dei mockup nel container.
Una scheda non è un archivio
Il progetto aperto e la cronologia vivono in memoria. Non esistono autosalvataggio persistente, collaborazione online o sincronizzazione Dropbox. Selezionare un file da Dropbox significa semplicemente aprire un file disponibile sul computer.
Ricaricare la scheda può perdere le modifiche non scaricate. Conserva il documento originale e usa nomi diversi per le copie.
Il codice ha stanze leggibili
src/io gestisce lettura e scrittura; src/model i dati e la geometria; src/render il disegno; src/editor la cronologia; src/export le esportazioni; src/ui l’interfaccia. Una divisione pratica per verificare il percorso dal file al pixel.