Sobre o PreviewPane
Estamos empenhados em fornecer aos desenvolvedores as melhores ferramentas de visualização e compartilhamento de código
Tornar a exibição de código elegante, tornar o compartilhamento de conhecimento simples
Missão do Produto
O PreviewPane é uma ferramenta de edição de código e exportação de imagens baseada na web, projetada especificamente para desenvolvedores front-end, designers e cenários educacionais. Nosso objetivo é permitir que os usuários editem facilmente o código HTML + CSS no navegador, visualizem os efeitos de execução em tempo real e, finalmente, o exportem como arquivos de imagem de alta qualidade.
Recursos Principais
Funções profissionais projetadas com base em documentos de requisitos para atender às necessidades reais dos desenvolvedores
Painel do Editor
Suporta a edição de código HTML + CSS com realce de sintaxe, usa fontes monoespaçadas, fornece código de exemplo padrão
Painel de Visualização
Renderização em tempo real de HTML + CSS, WYSIWYG, os efeitos de exibição da página são totalmente consistentes com as imagens exportadas, não executa JavaScript
Exportar Imagens de Código
Renderiza o código no Painel do Editor em imagens, mantendo os estilos originais do editor (fundo, fontes, bordas, cantos arredondados)
Exportar Efeitos de Execução
Exporta os efeitos renderizados no Painel de Visualização como PNG, garantindo que as imagens correspondam completamente aos efeitos da página
Múltiplos Estilos de Exportação
Suporta quatro temas de estilo de exportação diferentes: Padrão, Cartão, estilo macOS e estilo Terminal
Design Responsivo
Layout de cima para baixo para dispositivos móveis, layout da esquerda para a direita para desktops, design responsivo, construído com TailwindCSS
Arquitetura Técnica
前端技术栈：Stack de Tecnologia Front-end: O PreviewPane é construído sobre tecnologias web modernas, usando o framework React + Next.js, TailwindCSS para rápido desenvolvimento de estilos e layout responsivo, e o Monaco Editor oferece uma experiência de edição de código profissional.
核心实现：Implementação Principal: O Editor salva o estado do código através de useState, o Painel de Visualização usa dangerouslySetInnerHTML para a renderização em tempo real de HTML + CSS, a função de exportação baseada na biblioteca html-to-image gera imagens PNG, e a biblioteca file-saver lida com os downloads de arquivos.
设计理念：Filosofia de Design: Segue o princípio WYSIWYG, garantindo que as imagens exportadas correspondam completamente aos efeitos de exibição da página. Não executa código JavaScript do usuário, evitando riscos de segurança. Todos os estilos são embutidos ou em tags de estilo, garantindo uma exportação bem-sucedida.
Junte-se à Nossa Jornada
Vamos criar juntos uma melhor experiência de compartilhamento de código
Experimentar a Ferramenta Agora