Ignite-Element is a lightweight library for building reusable, state-driven, and framework-agnostic web components. Built on web standards like Custom Elements, Shadow DOM, and ES Modules, Ignite-Element empowers developers to create modular and scalable UIs with minimal boilerplate.
- Documentation
Comprehensive guides, examples, and best practices. - Installation
Get started in seconds. - Examples
Real-world integrations with XState, Redux, and MobX. - Contributing
Learn how to contribute and improve Ignite-Element.
- State Management Made Easy: Supports shared and isolated state components using state libraries like XState, Redux, and MobX.
- Reusable Web Components: Built on modern web standards to ensure compatibility and performance.
- Flexible Styling: Inject global styles or use scoped styles for each component.
- TypeScript Support: Provides type safety for seamless integration with your codebase.
Ignite-Element requires lit-html for rendering, as it’s the library currently used to define templates. While the goal is to make Ignite-Element rendering-agnostic in the future, for now, lit-html is a required dependency.
Install Ignite-Element with your preferred state management library:
npm install ignite-element lit-html xstate
Or, for Redux:
npm install ignite-element lit-html @reduxjs/toolkit
Or, for MobX:
npm install ignite-element lit-html mobx
Ignite-Element supports shared and isolated state components. Here’s a quick example:
import { igniteCore } from "ignite-element";
import { html } from "lit-html";
import counterMachine from "./counterMachine"; // Your XState machine
const igniteElement = igniteCore({
adapter: "xstate", // Choose "redux" or "mobx" if using those libraries
source: counterMachine,
});
// Define a shared component
igniteElement.shared("counter-display", (state, send) => {
return html`
<div>
<h3>Count: ${state.count}</h3>
<button @click=${() => send({ type: "INCREMENT" })}>Increment</button>
</div>
`;
});Explore real-world examples of Ignite-Element in action:
- XState + Tailwind CSS: State machine integration using XState, with Tailwind CSS for styling.
- Redux + Bootstrap: Redux-based state management, styled with Bootstrap.
- MobX + Custom Styles: A reactive example using MobX and custom global styles.
To run these examples locally, use the following commands:
-
XState Example:
pnpm run examples:xstate -
Redux Example:
pnpm run examples:redux -
MobX Example:
pnpm run examples:mobx
Ignite-Element offers flexible styling options:
- Global Styles: Apply global styles across all components using
setGlobalStyles. - Scoped Styles: Define encapsulated styles within each component.
- Dynamic Styles: Adjust styles dynamically based on component state.
Example: Using setGlobalStyles for Tailwind CSS:
import { setGlobalStyles } from "ignite-element";
setGlobalStyles("./styles/tailwind.css");For more details, see the Styling section.
For the full documentation, visit the Ignite-Element GitBook:
👉 https://joseflores.gitbook.io/ignite-element/
Contributions are welcome! To get started:
-
Fork the repository and clone your fork:
git clone https://github.com/<your-username>/ignite-element.git cd ignite-element
-
Install dependencies:
pnpm install -
Create a feature branch:
git checkout -b feature/my-new-feature -
Run tests:
pnpm test -
Submit a pull request with a clear description.
For detailed guidelines, see the Contributing section.
Your feedback helps Ignite-Element grow! Share your thoughts:
- Open an issue on GitHub
- Start a discussion on GitHub Discussions