Add CustardUI to any static site and let readers personalise their experience. Hide sections, set preferences and share exactly the right content with others. No backend required.

Read the docs    •    View on GitHub    •    npm package

What it can do

Hide irrelevant sections; Collapse less relevant sections.

Let readers collapse what they don't need. Their choice sticks across pages and sessions.

// Without DI — tightly coupled
class UserService {
    private Database db = new Database();
}

// With DI — dependency is injected
class UserService {
    private Database db;

    public UserService(Database db) {
        this.db = db;
    }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

// Without DI — tightly coupled
class UserService {
    private Database db = new Database();
}

// With DI — dependency is injected
class UserService {
    private Database db;

    public UserService(Database db) {
        this.db = db;
    }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

// Without DI — tightly coupled
class UserService {
    private Database db = new Database();
}

// With DI — dependency is injected
class UserService {
    private Database db;

    public UserService(Database db) {
        this.db = db;
    }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

The same page, three toggle states, where each reader can set their own peferences and see only what they chose to.

Set the default tab in tab groups.

Let readers switch to their preferred view for tabgroups once, and this selection persists across your site.

• Hover and click the     icon on any tab, or simply double-click it, to set it as your default across the site.
• Prefer a cleaner view? Hide the tab bar entirely in the settings modal through the    icon on the left. Click the option to
  "show only the selected tab" to hide the navigation headers and show only your preferred content!

function insertionSort(arr) {
    for (let i = 1; i < arr.length; i++) {
        let key = arr[i];
        let j = i - 1;
        while (j >= 0 && arr[j] > key) {
            arr[j + 1] = arr[j];
            j--;
        }
        arr[j + 1] = key;
    }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

void insertionSort(int[] arr) {
    for (int i = 1; i < arr.length; i++) {
        int key = arr[i];
        int j = i - 1;
        while (j >= 0 && arr[j] > key) {
            arr[j + 1] = arr[j];
            j--;
        }
        arr[j + 1] = key;
    }
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

def insertion_sort(arr):
    for i in range(1, len(arr)):
        key = arr[i]
        j = i - 1
        while j >= 0 and arr[j] > key:
            arr[j + 1] = arr[j]
            j -= 1
        arr[j + 1] = key

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

function binarySearch(arr, target) {
    let left = 0, right = arr.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (arr[mid] === target) return mid;
        else if (arr[mid] < target) left = mid + 1;
        else right = mid - 1;
    }
    return -1;
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

int binarySearch(int[] arr, int target) {
    int left = 0, right = arr.length - 1;
    while (left <= right) {
        int mid = (left + right) / 2;
        if (arr[mid] == target) return mid;
        else if (arr[mid] < target) left = mid + 1;
        else right = mid - 1;
    }
    return -1;
}

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    while left <= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1
    return -1

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Switch to Python on either page, and every code example across the site follows.

Tweak placeholder text to match the reader's profile.

Let readers personalise your page to their needs.

• Define a placeholder once, readers fill it in, and every instance across the site updates instantly. No backend required.

git clone https://[[ username ? github.com/cs2103t/$-ip.git : your-repo-link ]]

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

Type a username above — every link, command, and path updates live.

Share selected parts of a page with others.

Link anyone directly to the exact paragraph, step, or answer they need. No more "scroll down and look for it."

Click "Share" for a plain highlight, or "Share with note" to include a message and color. The URL encodes the element, color, position, and note — the recipient lands directly on that section.

Generating share links is built in. Add #cv-share to any page URL to enter share mode. Hover over any element on the page, add a note, and CustardUI generates the shareable URL for you. Links use content fingerprinting to stay robust even if the page text changes slightly.

Share your customisations with others.

Send a custom link that opens the page exactly as you intend, with placeholders pre-filled, sections pre-set. The recipient sees a personalised view instantly, no configuration needed.

git clone https://github.com/cs2103t/johndoe-ip.git
cd johndoe-ip

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

git add .
git commit -m "Initial commit"
git push origin main

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

The URL that produced this view:

?ph=username:johndoe,name:John%20Doe&t-hide=optional-steps

    

    Copy
    

    


    
    
    
    

    Wrap Text
    

    


    
    
    

ph= pre-fills placeholders. t-hide= hides toggle sections. A teacher can generate this link in seconds and send it directly to a student.

Advanced: let adopters create adaptations of your site.

Authors can expose selected content, such as logos, images, labels, and branding text, as adaptation points. Each organisation that adopts the site supplies a config preset overriding those values. The result is a single deployment that feels native to every audience it serves.

Same page, same deployment — different logo, different branding, different labels. Each organisation supplies a config preset; the site adapts automatically.

How it works

All reader preferences, tab selections, toggle states, and placeholder values are saved in the browser's localStorage. Nothing is sent to a server, nothing leaves the device. You define exactly what can be customised; readers adjust within those boundaries.

CustardUI works across all modern browsers with no configuration needed on the reader's end.

Works with any static site

CustardUI is open source under the MIT licence. Add it to any static site with a single script tag without needing any build step, npm install, or backend.

Built and tested with MarkBind. Also works with Jekyll, Docusaurus, React static sites, and any site that serves plain HTML.

View on GitHub    •    npm package

How to Get Started

Up and running in minutes. Add one script tag. Write one config file.

Done. Check the author guide for components and examples.