# Criar um plug-in de painel HTML

![](https://2039420718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fpvrg3LlJOoVEaLEzPCaq%2Fuploads%2Fgit-blob-3bb1de8a008afea600478f2e696fc65a3cf61d22%2FPANEL%20BASED%20PLUGIN.gif?alt=media)

Um plug-in baseado em painel que exibe uma página HTML tem um arquivo *manifest.json* com a seguinte estrutura:

```
{
    "PluginName": "Hello Block!",
    "PluginType": "Panel",
    "PluginDescription": "Creates a panel with an HTML form that allows dimensional input for a 3D block which will get generated at the world origin.",
    "Scripts": [
        "PLUGINLOCATION/block.js"
    ],
    "Panel": "PLUGINLOCATION/hello_block.html",
    "PanelIcon": "PLUGINLOCATION/hello_block.png"
}               
```

Além das [propriedades JSON padrão](https://windows.help.formit.autodesk.com/pt-br/plugins/how-to-develop-plugins/advanced-development/general-plugin-setup-in-the-manifest), um plug-in baseado em painel inclui as seguintes propriedades JSON especiais:

* “Panel” informa ao FormIt que esse plug-in é um painel e apresenta um link para a localização do arquivo HTML que deve ser carregado no painel.
* O arquivo HTML precisará de links no cabeçalho para os arquivos JavaScript apropriados, bem como para um arquivo CSS para estilização.
* O arquivo HTML será renderizado no painel do FormIt como seria em um navegador.
* É possível ver exemplos de interfaces HTML avançadas em nossa [organização FormIt3D](https://github.com/FormIt3D/).
* “PanelIcon” define um ícone para que esse plug-in seja exibido na guia no lado direito do aplicativo. Se indefinido, o FormIt cria um ícone automático usando as iniciais do nome do plug-in.

Depois que os arquivos HTML, CSS e JavaScript estão configurados, você pode começar a testar o plug-in do painel HTML [carregando-o ou instalando-o](https://windows.help.formit.autodesk.com/pt-br/plugins/advanced-development/setting-up-formit-for-development#load-vs.-install).