| # Frequently Asked Questions | |
| ## What do I need to install before using Custom Components? | |
| Before using Custom Components, make sure you have Python 3.8+, Node.js v16.14+, npm 9+, and Gradio 4.0+ installed. | |
| ## What templates can I use to create my custom component? | |
| Run `gradio cc show` to see the list of built-in templates. | |
| You can also start off from other's custom components! | |
| Simply `git clone` their repository and make your modifications. | |
| ## What is the development server? | |
| When you run `gradio cc dev`, a development server will load and run a Gradio app of your choosing. | |
| This is like when you run `python <app-file>.py`, however the `gradio` command will hot reload so you can instantly see your changes. | |
| ## The development server didn't work for me | |
| Make sure you have your package installed along with any dependencies you have added by running `gradio cc install`. | |
| Make sure there aren't any syntax or import errors in the Python or JavaScript code. | |
| ## Do I need to host my custom component on HuggingFace Spaces? | |
| You can develop and build your custom component without hosting or connecting to HuggingFace. | |
| If you would like to share your component with the gradio community, it is recommended to publish your package to PyPi and host a demo on HuggingFace so that anyone can install it or try it out. | |
| ## What methods are mandatory for implementing a custom component in Gradio? | |
| You must implement the `preprocess`, `postprocess`, `api_info`, `example_inputs`, `flag`, and `read_from_flag` methods. Read more in the [backend guide](./backend). | |
| ## What is the purpose of a `data_model` in Gradio custom components? | |
| A `data_model` defines the expected data format for your component, simplifying the component development process and self-documenting your code. It streamlines API usage and example caching. | |
| ## Why is it important to use `FileData` for components dealing with file uploads? | |
| Utilizing `FileData` is crucial for components that expect file uploads. It ensures secure file handling, automatic caching, and streamlined client library functionality. | |
| ## How can I add event triggers to my custom Gradio component? | |
| You can define event triggers in the `EVENTS` class attribute by listing the desired event names, which automatically adds corresponding methods to your component. | |
| ## Can I implement a custom Gradio component without defining a `data_model`? | |
| Yes, it is possible to create custom components without a `data_model`, but you are going to have to manually implement `api_info`, `example_inputs`, `flag`, and `read_from_flag` methods. | |
| ## Are there sample custom components I can learn from? | |
| We have prepared this [collection](https://huggingface.co/collections/gradio/custom-components-65497a761c5192d981710b12) of custom components on the HuggingFace Hub that you can use to get started! | |
| ## How can I find custom components created by the Gradio community? | |
| We're working on creating a gallery to make it really easy to discover new custom components. | |
| In the meantime, you can search for HuggingFace Spaces that are tagged as a `gradio-custom-component` [here](https://huggingface.co/search/full-text?q=gradio-custom-component&type=space) |