PaperCSS v2 + PaperJS

Wciśnij Ctrl K — paleta poleceń. Wciśnij Alt B — blueprint. Wciśnij Ctrl / — kod najbliższego demo.

Każdy .mirror sam wyciąga kod z <template> lub z data-src i generuje panel z zakładkami HTML / CSS / JS oraz przyciskiem „Kopiuj”.

Custom element, w którym piszesz HTML i widzisz wynik w <iframe sandbox>. Bez frameworków, bez CodeMirror, bez Monaco.

<paper-live>
<div class="card">
  <h3 class="card__title">Live</h3>
  <p class="card__desc">Edytuj i patrz.</p>
</div>
</paper-live>

Zwykła paleta poleceń jak w VS Code. Komendy rejestrujesz przez Paper.registerCommand({ label, run }).

Paper.registerCommand({
  label: 'Zapisz profil',
  hint: 'profil',
  keys: 'Ctrl+S',
  run: () => Paper.toast('Zapisano', { type: 'ok' }),
});

Paper.commandPalette();

Nakładka na cały layout — jak DevTools, ale wbudowana w framework. Widać strukturę każdego elementu, obramowania, siatkę 8px.

Paper.blueprint();       // toggle
Paper.blueprint(true);   // włącz
Paper.blueprint(false);  // wyłącz

Paper.anatomy(sel) zwraca obiekt z computed style, Paper.renderAnatomy(sel) zwraca HTML z tabelką.

const info = Paper.anatomy('#anatomy-target');
console.log(info);
// { tag: 'button', classes: ['btn'], width: 132, height: 38, ... }

// albo od razu toast + HTML:
const html = Paper.renderAnatomy('#anatomy-target');
document.querySelector('#out').innerHTML = html;

Przyciski

Karty

Formularz

Toast

Tabs

Sortable