Onun Tools

Code Lab

Edite, execute e visualize seu projeto no navegador.

Runtime desligadoWebContainer Node.js local

index.html35 lines

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My ONUN tool</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; display: grid; place-items: center;
      background: #141216; color: #f5eaf5; font: 16px system-ui, sans-serif; }
    main { width: min(85%, 430px); padding: 40px 0; }
    small { color: #ff87f7; letter-spacing: .16em; }
    h1 { font-size: 44px; line-height: 1.1; letter-spacing: -2px; font-weight: 500; }
    p { color: #ad9ab9; line-height: 1.7; }
    button { border: 0; border-radius: 10px; padding: 14px 20px; background: #ff87f7;
      color: #271624; font: inherit; cursor: pointer; }
    output { display: block; margin-top: 18px; color: #dbc1df; }
  </style>
</head>
<body>
  <main>
    <small>CREATED IN ONUN</small>
    <h1>Small tools.<br>Big possibilities.</h1>
    <p>Este código está rodando no seu navegador. Edite este arquivo e atualize a prévia.</p>
    <button id="counter">Experimentar</button>
    <output id="result" aria-live="polite"></output>
  </main>
  <script>
    let count = 0;
    document.querySelector('#counter').addEventListener('click', () => {
      document.querySelector('#result').textContent = 'Interações locais: ' + ++count;
    });
  </script>
</body>
</html>

LIVE PREVIEW

Make something yours.

Edite um arquivo. Inicie o runtime. Veja sua ideia ganhar vida, aqui mesmo.

TERMINAL

ONUN local workspace
O runtime será iniciado somente quando você clicar em “Iniciar runtime”.

Comandos diretos e argumentos. Para processos interativos, use scripts sem prompts. npm instala dependências no WebContainer.

01Execução local

Node.js, npm e o servidor de prévia executam no dispositivo. Se o runtime falhar, o erro aparece aqui.

02Arquivos portáveis

Edite arquivos offline e exporte snapshots. Instalação de pacotes precisa de conexão com a internet.

03Ambiente isolado

O projeto roda em uma origem separada da Onun. Suas chaves de geração não entram neste ambiente.

Abrindo o Code Lab...