Open Source Component-Driven Code Generator; It supports OpenAI, Ollama, ChakraUI, MaterialUI, BuilderIO, and more.
GPL-3.0 License
Hayde is CLI tool transforms React component creation, supporting frameworks like ChakraUI, MaterialUI, and leveraging AI tools like OpenAI and Ollama for smart, efficient coding. Perfect for developers seeking a fast, intuitive code generation experience.
To use Hayde, simply run the following command:
npx hayde@latest
This will launch the CLI tool and guide you through the process of creating a new React component.
Local Installation
If you want to install Hayde locally, you can run the following command:
npm install hayde --save-dev
or
yarn add hayde --dev
Online Demo
There are two options for running Hayde. Just simply run npx hayde
or You can also run Hayde with .hayde.json
file. This file allows you to specify default options for Hayde.
Here's an example of what the .hayde.json file might look like:
{
"plugins": [
{
"name": "general",
"options": {
"srcFolderLocation": "./src"
}
},
"css",
{
"name": "reactJS",
"options": {
"createInterface": true,
"styleLibrary": "chakraUI"
}
},
"chakraUI"
]
}
or if you want to use AI only with hayde, you can use .hayde.json
file like below:
{
"plugins": [
"general",
"AI"
]
}
This file sets the default options for Hayde to avoid having to enter them every time you run the tool. And when you create a new component, Hayde will create react component with Chakra UI and interface support on ./src
folder.
After creating .hayde.json
file, you can run Hayde with the following command:
npx hayde
For more information on the available options, please check the options page.
If you want to have multiple .hayde
file, you can just create the file with your profile. For example; you can create two files called .hayde.json
and .hayde.ai.json
. And then you can run the following command to use the .hayde.ai.json
file.
npx hayde --profile ai
For Examples, please check the examples folder. You can just copy JSON files from this folder and paste to root folder of your project. Then you can just run Hayde. Some examples are;
You can find more examples in the examples folder.
You can create React components with the following libraries, you just need to add the library name to the plugins array in the .hayde.json
file.
You can call any script you want before or after component creation! For NPM Scripts, please check the npm scripts page.
For CLI Arguments, please check the CLI arguments page.
For creating custom plugin, please check the custom plugin page. You can create your own libraries' plugin easily with extensive functionality and Handlebars template engine.
Also; you can create your hayde plugin with hayde. Just update your .hayde.json
file like below:
{
"plugins": [
"createPlugin"
]
}
then run the following command:
npx hayde
If you'd like to contribute to Hayde, please check the contributing page. Contributions are always welcome!
If you want to integrate your library/plugin/boilerplate to Hayde, please check the how to create custom plugin page.
Distributed under the GPL-3.0 License. See LICENSE for more information.