INTEGRATIONS

ApexKit + Microframe: Progressive Enhancement Guide — ApexKit Docs

ApexKit + Microframe: Progressive Enhancement Guide This guide explains how to use Microframe within ApexKit Templates to add rich interactivity to your serv...

# ApexKit + Microframe: Progressive Enhancement Guide

This guide explains how to use **Microframe** within **ApexKit Templates** to add rich interactivity to your server-rendered pages.

## The Philosophy: Progressive Enhancement

ApexKit (server-side) handles the heavy lifting: fetching data, security, and rendering the initial HTML via Tera. Microframe (client-side) takes over specific "islands" of the page to handle complex state, animations, or immediate user feedback without a server round-trip.

---

## 1. Setup

First, ensure `microframe.js` is accessible to your frontend. Since ApexKit serves static files from the `static/` directory, place the built `microframe.js` there.

**In your Base Template (`templates/layout.html`):**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... other meta tags ... -->
    
    <!-- 1. Load Microframe as a Module -->
    <script type="module" src="/styles.css"></script> <!-- Assuming CSS is here -->
    <script type="module">
        // Make Microframe available globally or import in specific script tags
        import Microframe from '/static/microframe.js';
        window.Microframe = Microframe; 
    </script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
```

---

## 2. The "Island" Strategy

Instead of turning your whole page into a Single Page App (SPA), you keep the page server-rendered but define custom elements for interactive parts.

### Example: An Interactive "Like" Button

Imagine rendering a blog post. The content is static (server-side), but the "Like" button needs to update instantly and send an API request in the background.

**Template Code (`templates/posts/view.html`):**

```html
<!-- 1. Server-Rendered Content (Tera) -->
<article>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>

    <!-- 2. Microframe Component "Island" -->
    <!-- We pass server data (post.id and current likes) via attributes -->
    <like-button 
        post-id="{{ post.id }}" 
        initial-likes="{{ post.likes }}">
    </like-button>
</article>

<!-- 3. Client-Side Logic inside <script> -->
<script type="module">
    import { Component, define, html, css } from '/static/microframe.js';

    class LikeButton extends Component {
        // Observe attributes to sync Server Data -> Client State
        static get observedAttributes() { return ['initial-likes', 'post-id']; }

        init() {
            // Hydrate state from server-rendered attributes
            this.state = {
                likes: parseInt(this.getAttribute('initial-likes') || 0),
                liked: false,
                loading: false
            };
        }

        styles() {
            return css`
                button { 
                    padding: 8px 16px; 
                    border-radius: 20px; 
                    border: 1px solid #ddd;
                    background: white;
                    cursor: pointer;
                    transition: all 0.2s;
                }
         

CLI / Code Reference

html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... other meta tags ... -->
    
    <!-- 1. Load Microframe as a Module -->
    <script type="module" src="/styles.css"></script> <!-- Assuming CSS is here -->
    <script type="module">
        // Make Microframe available globally or import in specific script tags
        import Microframe from '/static/microframe.js';
        window.Microframe = Microframe; 
    </script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Platform Navigation & Sitemap

Viewing the pre-rendered indexable snapshot of this resource.

Launch Interactive App in ApexKit Hub →

ApexKit + Microframe: Progressive Enhancement Guide — ApexKit Docs

CLI / Code Reference

Platform Navigation & Sitemap

Architecture & Engine

Documentation & Ecosystem

Project Activity & Vision