Lips is a modern, runtime-based UI framework that brings fine-grained reactivity without the need for build steps. Create dynamic web applications with a simple, declarative syntax that feels familiar to HTML developers while providing powerful reactive capabilities.
- Zero Build Step: Just import the script and start building
- Fine-Grained Reactivity: Only updates what changed, not the entire component
- Intuitive Template Syntax: Simple yet powerful templating that's familiar to HTML developers
- TypeScript Support: Full type definitions for better developer experience
- Built-in Performance Monitoring: Track rendering performance with integrated benchmarking
- Flexible Component Architecture: Object-based or ES Module syntax for your components
- Context API: Share state across components without prop drilling
- Lifecycle Hooks: Fine-grained control over component behavior
- Built-in Routing & i18n: Everything you need in a single package
<!DOCTYPE html>
<html>
<head>
<title>My Lips App</title>
</head>
<body>
<div id="app"></div>
<script type="module">
// Import from CDN directly in the module script
import Lips from 'https://cdn.jsdelivr.net/npm/@lipsjs/lips'
const lips = new Lips();
// <counter/> component
const counter = {
state: { count: 0 },
handler: {
increment() { this.state.count++; }
},
default: `
<div>
<h2>Count: {state.count}</h2>
<button on-click(increment)>Increment</button>
</div>
`
};
lips.root(counter, '#app');
</script>
</body>
</html>npm install @lipsjs/lips<script src="https://cdn.jsdelivr.net/npm/@lipsjs/lips"></script>For comprehensive documentation, examples, and API reference, visit:
Lips is developed using Bun runtime environment.
# Clone the repository
git clone https://github.com/fabrice8/lips.git
cd lips
# Install dependencies
npm install
# Make sure you have Bun installed
# If not: curl -fsSL https://bun.sh/install | bash
# Development with watch mode
bun run dev
# Build for production
bun run compile
# Build type declarations
bun run build:declarationContributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature
- Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature
- Open a Pull Request
Please ensure your code follows the existing style and includes appropriate tests.
- Ensure you have Bun installed for development
- Follow the TypeScript coding style
- Add unit tests for new features
- Maintain the zero-build philosophy for runtime usage
- Update documentation for any new features or changes
This project is licensed under the MIT License - see the LICENSE file for details.
- Bun for the fast JavaScript runtime and bundler
- Cash-DOM for the lightweight jQuery alternative
- Stylis for the CSS preprocessor
- MarkoJS for their inspiring syntax declaration struture.
- SolidJS for the signal based reactivity concept.
- All contributors who have helped make Lips better
Lips - Reactive UI without the complexity. Created with ❤️ by Fabrice K.E.M