Começar a criar

Playcode Classic

Playground de React online

Use este playground de React online: ele roda os seus componentes no navegador. Edite o App.jsx e o app atualiza enquanto você digita, com React 18 e Tailwind CSS no template e os pacotes do npm a um clique. Não precisa instalar nada nem criar conta para começar; entre na sua conta para salvar e compartilhar. Faz parte do Playcode Classic, o conjunto de ferramentas de código gratuitas do Playcode.

Abrir o playground

Grátis. Não precisa de conta para começar.

Na caixa de areia de um parquinho, um jovem desenvolvedor e o Play montam um app com grandes blocos de montar sobre uma base; o Play encaixa o último bloco, um botão laranja, e um foguete espera do outro lado da cerca.

Edite um componente. O app acompanha.

A prévia é recompilada um instante depois que você digita. Cada edição recarrega o app, então o estado começa do zero.

Precisa de um site inteiro, e não de um componente? Experimente o criador de sites com IA
Num pequeno teatro de marionetes no parquinho, o Play mexe os fios lá de cima, e a marionete no palco, uma paginazinha da web com braços, acena enquanto o jovem desenvolvedor assiste de um banco.

Comece com a stack que você já usa

Importe do npm.

Importe um pacote, escolha a versão e clique para instalar.

Tem um arquivo .jsx?

Cole num arquivo e renderize pelo index.jsx.

Quando o app precisa de um servidor

O playground roda no seu navegador: sem servidor, sem Next.js, sem React Native. Quando um app precisa de backend, banco de dados e domínio próprio, o Playcode AI cria o app e o Playcode Cloud o mantém no ar, num plano pago.

Conheça o Playcode Cloud
Na caixa de areia há um foguete de brinquedo feito de blocos; do outro lado da cerca, o foguete de verdade está na plataforma, ligado a uma linha de combustível, e o Play o apresenta ao jovem desenvolvedor com a mão aberta.

Faz parte do Playcode Classic

O Playcode começou em 2016 como um ambiente de programação no navegador. Este playground é uma das ferramentas de código gratuitas do Playcode, que hoje chamamos de Playcode Classic.

Hoje, o Playcode é uma plataforma de IA para criar sites e apps e mantê-los no ar.

Conheça o criador de sites com IATodas as ferramentas do Playcode Classic
O Play está no portão aberto de um velho parquinho e mostra o que há do outro lado: um foguete pronto na plataforma de lançamento.

Perguntas frequentes

  • Este editor de React online é grátis?

    Sim. Escrever e ver a prévia é grátis e não exige conta. Uma conta gratuita guarda até três projetos salvos, públicos ou privados; um domínio personalizado exige um plano pago, e o chat com IA usa créditos.

  • Qual versão do React o playground usa?

    React 18.3.1 em todos os templates. A versão vem do package.json.

  • Posso rodar código React online sem instalar nada?

    Sim. O playground é um sandbox de React no seu navegador e funciona como um compilador de React online: escreva um componente e ele renderiza enquanto você digita. Não há projeto para configurar.

  • Funciona com JSX e TypeScript?

    Sim. Arquivos .jsx e .tsx são compilados na prévia; o template React e TypeScript verifica os seus tipos enquanto você escreve.

  • Posso usar pacotes do npm?

    Sim. Importe um pacote, escolha a versão e clique para instalar, ou adicione pelo painel de pacotes.

  • Tem hot reload?

    O app atualiza enquanto você digita, mas cada edição o recarrega, então o estado começa do zero. Ainda não há Fast Refresh.

  • Posso usar Tailwind CSS ou CSS Modules?

    O Tailwind CSS já vem no template. CSS Modules funcionam como arquivos .module.css; .module.scss ainda não funciona.

  • Posso criar com Next.js ou React Native aqui?

    Não. O playground roda React no seu navegador. Para um app com servidor e banco de dados, o Playcode AI cria o app e o Playcode Cloud o mantém no ar, num plano pago.

  • Posso abrir um arquivo .jsx?

    Sim. Cole o conteúdo num arquivo do template React e renderize pelo index.jsx.

  • Posso compartilhar o meu playground?

    Sim. Entre na sua conta e salve o projeto. Na aba Compartilhar, mude “Qualquer pessoa com o link” para “Pode ver” e copie o link.

  • Este playground faz parte do Playcode?

    Sim. Este playground faz parte do Playcode Classic, o conjunto de ferramentas de código gratuitas do Playcode. O Playcode começou em 2016 como um ambiente de programação no navegador. Hoje, é uma plataforma de IA para criar sites e apps e mantê-los no ar.

Mais ferramentas de código gratuitas

Escreva um componente. Veja o app rodar.

Abrir o playground
Um foguete espera com a porta aberta e um assento vazio, e o Play convida você a entrar. Lá no alto, outro foguete se afasta.