@zw/remarklet

Remarklet - JavaScript web page editor

Remarklet adds visual editing capabilities to any web page. This makes modifying and commenting on them remarkably easy, even on touchscreens! Check out the CodePen demo.

Features | Installation | Installation from CDN | Contributing | Known Issues | Feature Roadmap

Features

This library lets you add the following features to any web page with no keyboard shortcuts or UI overlays:

• Drag elements around the page
• Resize elements
• Edit text
• Option to save your changes to local storage

Installation

This package can be installed with:

• npm: npm install @zw/remarklet
• yarn: yarn add @zw/remarklet
• pnpm: pnpm add @zw/remarklet

Then import the module in your JavaScript file:

import remarklet from "@zw/remarklet";
// Override default options for the library.
remarklet.options({
    persist: true, // default: false.
    hide: true, // default: false.
});
// Restore persisted changes without activating any other features.
remarklet.restore();
// Activate the library.
remarklet.activate();
// Now users can drag, resize, and edit elements on the page.
remarklet.deactivate();
// Now event handlers are unregistered and will be re-registered the next time remarklet.activate() is called.

Installation from CDN

This library is available from:

• unpkg: https://unpkg.com/@zw/remarklet/dist/remarklet.min.js
• jsdelivr: https://cdn.jsdelivr.net/npm/@zw/remarklet/dist/remarklet.min.js

To run Remarklet in any webpage, visit the webpage and then paste this into your browser's address bar (it also works with jsdelivr):

javascript:(function(){const script=document.createElement("script");script.src="https://unpkg.com/@zw/remarklet/dist/remarklet.min.js";document.head.appendChild(script);script.onload=()=>{remarklet.activate()}})();

To persist the changes using local storage, use this bookmarklet URL:

javascript:(function(){const script=document.createElement("script");script.src="https://unpkg.com/@zw/remarklet/dist/remarklet.min.js";document.head.appendChild(script);script.onload=()=>{remarklet.options({persist:true});remarklet.activate()}})();

You can save this as a custom bookmark in your browser, so you can activate the library on any webpage just by clicking it.

To use Remarklet in your own webpage, add the following code to your HTML file:

<script src="https://unpkg.com/@zw/remarklet/dist/remarklet.min.js"></script>
<script>
    // Override default options for the library.
    remarklet.options({
        persist: true, // default: false.
        hide: true,
    });
    // Restore persisted changes without activating any other features.
    remarklet.restore();
    // Activate the library.
    remarklet.activate();
    // Now users can drag, resize, and edit elements on the page.
    remarklet.deactivate();
    // Now event handlers are unregistered and will be re-registered the next time remarklet.activate() is called.
</script>

Contributing

Interested in contributing? Check out the CONTRIBUTING.md file for guidelines.

If you would like to participate in discussions, you can post in the GitHub Discussions section of the repository.

Copyright 2014-2025 Zachary Kendall Watkins, [e-mail], https://zacharywatkins.com

Known Issues

We use GitHub to track issues, but some issues may be beyond the scope of this library to resolve. Those issues are listed in a GitHub Discussion here: https://github.com/ZachWatkins/Remarklet/discussions/100.