Playground HTML CSS JS

Escreva, execute e compartilhe trechos de código - sem instalação.

Pré-visualizaçãoPr?via autom?tica

Console

A sa?da do console aparecer? aqui.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Playground</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1 id="greeting">Hello, world!</h1>
        <button id="btn">Click me</button>
        <script src="script.js"></script>
    </body>
</html>

Construa HTML, CSS e JavaScript com preview ao vivo

Um playground online e gratuito de HTML, CSS e JavaScript com preview real no navegador. Edite três arquivos - index.html, styles.css e script.js - e o iframe re-renderiza a cada mudança. Sem servidor local, sem extensão Live Server, sem build.

O editor usa o mesmo motor do VS Code, então tags HTML, propriedades CSS e autocomplete de JS funcionam normalmente. O preview ao vivo renderiza sua página dentro de um iframe isolado no navegador. Útil para prototipar uma landing page, experimentar com CSS grid ou escrever scripts DOM vanilla.

Por que este playground de HTML, CSS e JavaScript vai te ajudar

Preview ao vivo instantâneo - edite HTML, CSS ou JS e o iframe re-renderiza a cada mudança. Sem build, sem atualizar.
Destaque de sintaxe e autocompletar para HTML, CSS e JavaScript. Atalhos no estilo Emmet e feedback imediato, tudo no mesmo motor de editor do VS Code.
Zero instalação: sem Node, sem Live Server, sem servidor HTTP local. Visualize HTML, CSS e JS em qualquer navegador.
Pré-visualização ao vivo com os três arquivos - HTML, CSS e JavaScript editam juntos e re-renderizam em iframe a cada mudança, sem build.

O que você pode construir no playground de HTML, CSS e JavaScript

Uma landing page: HTML estruturado, CSS moderno (grid, flex, custom properties) e um toque de JavaScript, tudo com live reload no iframe de preview.
Experimentos com CSS: layouts com grid, alinhamento com flex, animações e media queries responsivas, com feedback visual imediato a cada mudança.
Manipulação do DOM com JavaScript puro: querySelector, event listeners, chamadas fetch, localStorage, com preview ao vivo no navegador para feedback imediato.

Perguntas frequentes sobre o playground de HTML, CSS e JavaScript

O playground de HTML, CSS e JavaScript online é gratuito?

Sim, o playground de HTML, CSS e JavaScript é gratuito. Sem cadastro, sem servidor local e sem a extensão Live Server do VS Code - é só escrever e visualizar.

Preciso de um servidor local ou do Live Server do VS Code?

Não precisa instalar nada. Você não precisa do Live Server do VS Code, de um servidor HTTP local ou do Node. O navegador renderiza seus arquivos HTML, CSS e JS direto em um iframe.

O playground de HTML, CSS e JavaScript funciona no celular?

Sim. O playground de HTML, CSS e JavaScript funciona em navegadores desktop, tablet e celular. O editor, o iframe de preview e as abas de arquivos se adaptam a telas menores.

É seguro visualizar HTML e JavaScript aqui?

Sim. Seu HTML, CSS e JavaScript renderizam dentro de um iframe de preview isolado no navegador, separado da p?gina da Coddy ao redor dele.

Como aprendo HTML, CSS e JavaScript depois de testar o playground?

Ajuste o HTML, CSS e JS de exemplo, aperte Rodar e veja o preview atualizar. Quando quiser algo mais estruturado, os cursos interativos de HTML, CSS e JavaScript do Coddy levam você de seletores a páginas completas.

Ferramentas úteis para Web

Ferramentas gratuitas baseadas no navegador que combinam bem com o Playground de Web - tudo faz parte do Coddy.

Ver todas as ferramentas Folha de Consulta de Web