Editor Suite

Un playground di sviluppo web e scrittura tecnica completo e scattante: esegui codice HTML, CSS e JavaScript in una sandbox isolata, componi note Markdown con anteprima in tempo reale ed esporta il tuo lavoro senza registrazioni né telemetria.

JavaScript HTML5 Sandbox CSS3 Markdown Engine Zero Telemetry
Apri Editor Suite Tutti i Progetti
/ Il Problema

I playground web moderni sono diventati troppo pesanti

Per testare un'idea veloce di codice CSS, verificare un prototipo JavaScript o scrivere documentazione in Markdown, i programmatori si rivolgono spesso a playground online ben noti. Tuttavia:

  • Pesantezza e tempi di caricamento biblici: decine di script analitici, banner pubblicitari e bundle monolitici da svariati megabyte che rendono lenta anche la digitazione.
  • Account forzati per salvare snippet: non è possibile salvare file localmente senza registrarsi con email o profilo social.
  • Privacy assente: ogni frammento di codice o idea prototipata viene salvato su database pubblici o accessibili a terzi.
/ L'Idea & Architettura

Leggerezza, isolamento sandbox e zero distrazioni

Editor Suite è stato progettato per offrire un ambiente minimale, ultra-reattivo e totalmente privato:

  • Web Code Playground: tre pannelli sincronizzati (HTML, CSS, JS) con esecuzione in tempo reale all'interno di un <iframe sandbox> isolato per massima sicurezza.
  • Markdown Studio: editor split-screen per redigere documentazione, note e articoli con parsing istantaneo, supporto tabelle e highlighting del codice.
  • Salvataggio automatico locale: i file rimangono memorizzati nel browser e possono essere scaricati come pacchetto .zip o singoli file con un click.
/ Sfide Tecniche

Sicurezza dell'esecuzione e gestione del rendering

Eseguire codice JavaScript arbitrario inserito dall'utente in una pagina web richiede accorgimenti di sicurezza ferrei:

1. Isolamento Sandbox e prevenzione loop infiniti

Il codice dell'anteprima gira all'interno di un iframe con attributi sandbox="allow-scripts" e restrizioni di origine per impedire accessi non autorizzati al localStorage o cookie della finestra principale. Inoltre, è presente un wrapper sui cicli (while/for) che intercetta eventuali loop infiniti prima che congelino la CPU.

2. Debounce intelligente del live preview

L'aggiornamento dell'anteprima viene ricalcolato con un algoritmo di debouncing adattivo: non appena l'utente smette di digitare per 250ms, il virtual DOM viene aggiornato senza sfarfallii visivi o ricostruzioni pesanti dell'albero HTML.

3. Console integrata in-page

I metodi console.log, console.warn e console.error generati dall'iframe vengono intercettati e reindirizzati a un pannello console interno stilizzato, permettendo il debug istantaneo anche su dispositivi touch o mobile.