Editor HTML Online

Continuar na ferramenta

Mais páginas desta ferramenta

playground html css js online compartilhar

Playground de HTML, CSS e JS online com link para compartilhar

Clique em Compartilhar e o código inteiro vai para o link, depois do sinal #, comprimido. Não existe conta nem banco de dados: quem recebe o link abre os três painéis preenchidos, e o código só roda quando essa pessoa clica em Executar.

Como o link carrega o código e por que ele é seguro de abrir

Os três painéis viram um pequeno JSON, que é comprimido com deflate (quando o navegador oferece CompressionStream) e escrito em base64 seguro para URL no fragmento, o trecho depois do #. Esse trecho nunca é enviado em requisições HTTP, então o servidor do site não recebe o seu código. Repetições comprimem muito bem: 400 linhas iguais de lista, com mais de 5.000 caracteres, cabem em menos de 400 caracteres de link. O formato é c= para comprimido e u= para o texto simples usado quando o navegador não comprime, e um link u= abre em qualquer navegador, enquanto um link c= exige que o navegador saiba descomprimir.
Um link vindo de terceiros é tratado como dado hostil. O fragmento tem teto de 1.500.000 caracteres, cada painel de 500.000, e a descompressão para ao passar de 1,6 milhão de bytes, o que barra as chamadas bombas de descompressão. Mesmo com o código válido, ele não roda sozinho: aparece um aviso e o botão Executar mesmo assim, porque uma página enviada por desconhecido poderia imitar um formulário de login. A prévia é isolada (sandbox sem allow-same-origin) e não envia formulários, mas pode usar a rede, e por isso nunca digite senhas nela.
Links com mais de cerca de 2.000 caracteres podem ser cortados por alguns aplicativos de mensagem, e a ferramenta avisa quando o link passa disso. Nesse caso, o botão Baixar gera um arquivo .html único, sem o script de console, que serve para anexar a e-mails ou subir num repositório. Dá ainda para começar de um dos sete modelos e compartilhar a variação.

Limites e formatos do link

Formato do link comprimido

Entrada: https://jkit.tools/...#c=eJxL...
Saída esperada: prefixo c=

O restante é base64 seguro para URL do JSON comprimido.

Formato sem compressão

Entrada: navegador sem CompressionStream
Saída esperada: prefixo u=

O JSON em base64 seguro para URL, mais longo, mas legível pelo mesmo editor.

Compressão de repetição

Entrada: 400 linhas <li>item</li>
Saída esperada: link com menos de 400 caracteres

O texto de origem tem 5.600 caracteres.

Teto do fragmento

Entrada: fragmento muito longo
Saída esperada: acima de 1.500.000 caracteres: recusado

O link é ignorado e o editor abre com o seu rascunho ou o modelo inicial.

Tamanho recomendado

Entrada: aviso de link longo
Saída esperada: acima de 2.000 caracteres

Alguns aplicativos de mensagem cortam links maiores.

FAQ da ferramenta completa

Como testar HTML, CSS e JavaScript online sem instalar nada?

Escreva nos três painéis e a prévia atualiza na hora. Não precisa de conta, servidor nem arquivo: o navegador monta uma página com o seu HTML no corpo, o CSS numa tag style e o JavaScript no fim do corpo, e executa tudo num iframe isolado. O console mostra o que o código imprimir.

Meu código tem acesso aos dados deste site?

Por que alert, confirm e prompt não abrem janela?

Como compartilhar o que eu escrevi?

O link de compartilhamento envia meu código a algum servidor?

Posso usar bibliotecas por CDN e chamar APIs com fetch?

Como baixar a página como arquivo HTML?

A prévia travou. O que fazer?

Posso colar uma página HTML completa?

O que escrevo fica salvo?

Perguntas frequentes

Quem recebe o link precisa de conta?

Não. O link abre direto no editor com o código nos painéis, e a pessoa clica em Executar para ver o resultado.

O link expira ou pode ser editado depois?

Não expira, porque o código está dentro dele e não em um servidor. Por isso também não dá para editar um link já enviado: cada edição gera outro link.

Meu código fica público ao compartilhar?

Só quem tem o link o vê, e ele não passa por servidor. Mas qualquer pessoa com o link lê o código completo, então não inclua chaves de API nem senhas.

Próximos passos

Como o link carrega o código e por que ele é seguro de abrir

Os três painéis viram um pequeno JSON, que é comprimido com deflate (quando o navegador oferece CompressionStream) e escrito em base64 seguro para URL no fragmento, o trecho depois do #. Esse trecho nunca é enviado em requisições HTTP, então o servidor do site não recebe o seu código. Repetições comprimem muito bem: 400 linhas iguais de lista, com mais de 5.000 caracteres, cabem em menos de 400 caracteres de link. O formato é c= para comprimido e u= para o texto simples usado quando o navegador não comprime, e um link u= abre em qualquer navegador, enquanto um link c= exige que o navegador saiba descomprimir.

Um link vindo de terceiros é tratado como dado hostil. O fragmento tem teto de 1.500.000 caracteres, cada painel de 500.000, e a descompressão para ao passar de 1,6 milhão de bytes, o que barra as chamadas bombas de descompressão. Mesmo com o código válido, ele não roda sozinho: aparece um aviso e o botão Executar mesmo assim, porque uma página enviada por desconhecido poderia imitar um formulário de login. A prévia é isolada (sandbox sem allow-same-origin) e não envia formulários, mas pode usar a rede, e por isso nunca digite senhas nela.

Links com mais de cerca de 2.000 caracteres podem ser cortados por alguns aplicativos de mensagem, e a ferramenta avisa quando o link passa disso. Nesse caso, o botão Baixar gera um arquivo .html único, sem o script de console, que serve para anexar a e-mails ou subir num repositório. Dá ainda para começar de um dos sete modelos e compartilhar a variação.

Limites e formatos do link

Formato do link comprimido

Entrada: https://jkit.tools/...#c=eJxL...
Saída esperada: prefixo c=

O restante é base64 seguro para URL do JSON comprimido.

Formato sem compressão

Entrada: navegador sem CompressionStream
Saída esperada: prefixo u=

O JSON em base64 seguro para URL, mais longo, mas legível pelo mesmo editor.

Compressão de repetição

Entrada: 400 linhas <li>item</li>
Saída esperada: link com menos de 400 caracteres

O texto de origem tem 5.600 caracteres.

Teto do fragmento

Entrada: fragmento muito longo
Saída esperada: acima de 1.500.000 caracteres: recusado

O link é ignorado e o editor abre com o seu rascunho ou o modelo inicial.

Tamanho recomendado

Entrada: aviso de link longo
Saída esperada: acima de 2.000 caracteres

Alguns aplicativos de mensagem cortam links maiores.

FAQ da ferramenta completa

Como testar HTML, CSS e JavaScript online sem instalar nada?

Meu código tem acesso aos dados deste site?

Por que alert, confirm e prompt não abrem janela?

Como compartilhar o que eu escrevi?

O link de compartilhamento envia meu código a algum servidor?

Posso usar bibliotecas por CDN e chamar APIs com fetch?

Como baixar a página como arquivo HTML?

A prévia travou. O que fazer?

Posso colar uma página HTML completa?

O que escrevo fica salvo?

Perguntas frequentes

Quem recebe o link precisa de conta?

Não. O link abre direto no editor com o código nos painéis, e a pessoa clica em Executar para ver o resultado.

O link expira ou pode ser editado depois?

Não expira, porque o código está dentro dele e não em um servidor. Por isso também não dá para editar um link já enviado: cada edição gera outro link.

Meu código fica público ao compartilhar?

Só quem tem o link o vê, e ele não passa por servidor. Mas qualquer pessoa com o link lê o código completo, então não inclua chaves de API nem senhas.