Como usar o CodePen para sua startup
TL;DR
O CodePen é um editor de código online e uma comunidade onde se escreve HTML, CSS e JavaScript no navegador e se vê o resultado na hora. O plano gratuito dá Pens públicos ilimitados, e o PRO começa em US$ 8 por mês no pagamento anual. Ele atende startups com um produto front-end, um widget, uma API ou um design system que desenvolvedores querem testar antes de se cadastrar.
O que é o CodePen?
Um Pen é um pequeno projeto com painéis de HTML, CSS e JavaScript e uma pré-visualização ao vivo. Os Pens são públicos por padrão, as pessoas podem curtir, comentar e fazer fork, e qualquer um pode incorporar um Pen num blog, numa documentação ou numa landing page. As Collections agrupam Pens, e os Challenges trazem toda semana um novo desafio dentro de um tema mensal, com os melhores Pens escolhidos e destacados na página inicial.
O público são desenvolvedores front-end, designers e estudantes. O CodePen não tem formulário para enviar sua startup, e o código de conduta proíbe spam em Pens, comentários e mensagens.
Quem deve usar o CodePen?
- Startups que vendem uma biblioteca JavaScript, um kit de UI, uma biblioteca de componentes ou um framework CSS.
- Empresas de API e SaaS que querem exemplos prontos para rodar na documentação.
- Startups de ferramentas para desenvolvedores que querem alcançar devs front-end com demos úteis.
- Pule se o seu produto não tem lado front-end nem de desenvolvimento. Um Pen que só anuncia um serviço não técnico quebra a regra contra spam.
Quanto custa o CodePen?
O plano Free inclui Pens públicos ilimitados com até 3 arquivos por Pen e acesso à API com limites menores. A página de preços do CodePen lista três planos PRO individuais, com preço mensal no pagamento anual:
- Starter: US$ 8 por mês (US$ 96 por ano), 50 arquivos por Pen, 2 GB de hospedagem de arquivos, 5 colaboradores.
- Developer: US$ 12 por mês (US$ 144 por ano), 150 arquivos por Pen, 25 GB de hospedagem, 10 colaboradores.
- Super: US$ 26 por mês (US$ 312 por ano), 300 arquivos por Pen, 50 GB de hospedagem, 15 colaboradores.
Todos os planos PRO adicionam Pens privados, Pens publicados com domínios próprios (5, 10 ou 25), temas de incorporação personalizados, CodePen AI e nenhum anúncio. O pagamento mensal custa mais, e também existem planos de equipe.
Como divulgar sua startup no CodePen?
- Cadastre-se de graça no CodePen e preencha o perfil com nome, bio e link do site. Os links do perfil levam ugc nofollow, então espere visitas e não ganho de SEO.
- Crie um Pen por caso de uso: «Instale o widget em 3 linhas», «Modo escuro com nossa biblioteca de componentes», «Chame nossa API pelo navegador».
- Dê a cada Pen um título claro, uma descrição e tags.
- Incorpore o Pen na documentação, nos posts do blog e no changelog para que o leitor rode e faça fork ali mesmo.
- Participe de um CodePen Challenge com um Pen que use seu produto.
- Passe para o PRO só quando precisar de trabalho privado para clientes, hospedar seus próprios arquivos ou publicar um Pen em domínio próprio.
Dicas para aproveitar melhor o CodePen
- Faça da demo o seu pitch. Um Pen que resolve um problema real de front-end ganha forks, e cada fork mostra seu código a um novo desenvolvedor.
- Mantenha cada Pen pequeno e focado, com comentários no código explicando a configuração.
- Use um tema de incorporação personalizado no PRO para que as demos incorporadas tenham as cores da sua marca.
Nosso veredito
O CodePen funciona para fundadores cujo produto vive no navegador, e premia demos úteis mais do que anúncios. O plano gratuito cobre a maioria das necessidades, e o PRO compensa quando você hospeda arquivos ou publica protótipos.
Mais opções: veja todas as galerias de design e sites de portfólio. Está planejando o lançamento em torno desta listagem? O jogo de startups Fe/male Switch acompanha fundadoras da ideia aos primeiros clientes.