Lips UI Framework

Easy, straightforward and direcrly into the browser, no pre-build required.

View on GitHub

<!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>
  1. Introduction
  2. Getting Started
  3. Core Concepts
  4. Component API
  5. Template Syntax
  6. Built-in Components
    • <if>, <else-if>, <else>
    • <for>
    • <switch>, <case>
    • <async>, <then>, <catch>
    • <router>
    • <let> and <const>
  7. Advanced Features
  8. Styling
  9. Internationalization (i18n)
  10. Best Practices
  11. Examples
  12. API Reference

Introduction to Lips Framework

What is Lips?

Lips is a lightweight, reactive UI framework that runs directly in the browser. It offers a component-based architecture with fine-grained reactivity, making it ideal for building dynamic web applications with minimal overhead.

Unlike heavier frameworks that require build steps, Lips can be used by simply importing a script, allowing you to start developing immediately without complex tooling.

Key Features

Comparison with Other Frameworks

Feature Lips React Vue Svelte
Runtime Only ✓ ✗ ✗ ✗
No Build Step ✓ ✗ ✗ ✗
Fine-Grained Updates ✓ ✗ ✓ ✓
Virtual DOM ✗ ✓ ✓ ✗
Built-in State Management ✓ ✗ ✓ ✓
Built-in Routing ✓ ✗ ✗ ✗
Performance Benchmarking ✓ ✗ ✗ ✗
File Size Small Medium Medium Small

Browser Compatibility

Lips is designed to work in all modern browsers, including: