Formix is an opinionated, modular, and highly customizable library for rendering JSON schema into beautifully styled and functional form elements.
Designed specifically for Solid.js with suppport for NixOS and Clan modules. Formix makes it easy to build complex forms from JSON schema with effortless configuration and customization.
- Modular and Configurable: Easily configure form elements to suit a variety of use cases.
- Solid.js Integration: Built with Solid.js at its core for reactive, high-performance forms.
- NixOS Friendly: Meant to be a UI building block for NixOS System configurations.
- Highly User friendly: Tackles common UX challenges by offering a high level of customizability ranging from NixOS Module meta configuration to custom UI Components.
Install Formix through npm:
npm install formixHere's a quick example to get you up and running with Formix.
import { Formix } from "formix";
import { jsonSchema } from "./your-schema";
function App() {
return (
<div>
<h1>Example Form</h1>
<Formix schema={jsonSchema} />
</div>
);
}
export default App;{
"title": "User Registration",
"type": "object",
"properties": {
"name": {
"type": "string",
"title": "Name"
},
"email": {
"type": "string",
"format": "email",
"title": "Email"
},
"password": {
"type": "string",
"format": "password",
"title": "Password"
}
},
"required": ["name", "email", "password"]
}Formix offers several ways to configure and customize forms:
- Schema Modularity: Build and combine schema parts for complex forms.
- Custom Components: Replace default form elements with custom components.
- Styling: Compatible with various CSS frameworks or your own custom styling.
<Formix
schema={jsonSchema}
config={{
theme: "your-theme-class",
customComponents: {
input: CustomInput,
select: CustomSelect,
},
}}
/>Explore the full documentation here for detailed information on advanced usage, configuration, and NixOS module integration.
Contributions are welcome! Please read the contributing guide to get started.
MIT License. See LICENSE for more information.