Free, open-source JavaScript tools with zero dependencies. Powered by AI. Use in any project — even commercially.
Each tool solves one problem perfectly. Use one or all three.
Save any JavaScript object into the URL with compression. Create shareable links that restore full app state — no backend, no database, just a URL.
~2 KBCompressionFramework-agnosticA visual CSS editor that lets users customize any website. Point-and-click element selection, edit styles, and everything saves to localStorage automatically.
~3 KBVisual UIlocalStorageValidate data before saving to localStorage or sessionStorage. Built-in validators for emails, URLs, numbers — plus custom rules and regex support.
~1 KBCustom Rules10+ ValidatorsNo install needed. Everything runs right here in your browser.
Fill in the fields, click Save to URL, and watch the address bar change. Copy the link and send it to anyone — they will see your exact data.
Click Activate to open the editor panel. Then click Select in the panel and click any element on this page to customize its styles. Changes persist in localStorage.
Try valid and invalid data. Data Guard checks everything before saving to localStorage.
Each tool is a single file. Drop it into your project and start using it.
<script type="module">
import { saveToUrl, loadFromUrl }
from './url-state/src/index.js';
</script><script type="module">
import { init }
from './web-editor/src/index.js';
init();
</script><script type="module">
import { rule, guardedSet }
from './data-guard/src/index.js';
</script>Or clone the entire repository:
git clone https://github.com/vbtronic/web_protocols.git
Step-by-step guide to add Web Protocols into your website or product.
Download only the tools you need, or clone the whole repo. Each tool is a single .js file.
git clone https://github.com/vbtronic/web_protocols.git
# or download individual files from the Download section
# or use CDN links directlyCopy the .js file into your project folder. No npm install, no build step.
your-project/
index.html
js/
url-state.js <-- paste here
web-editor.js <-- paste here
data-guard.js <-- paste hereAdd a script tag with type="module" and import the functions you need.
<script type="module">
import { saveToUrl, loadFromUrl } from './js/url-state.js';
import { init } from './js/web-editor.js';
import { rule, guardedSet } from './js/data-guard.js';
</script>import { saveToUrl } from 'https://vbtronic.github.io/web_protocols/packages/url-state/src/index.js';Call the functions wherever you need them. Everything works client-side, no setup required.
// Save form state to URL for sharing
document.getElementById('save-btn').onclick = () => {
const data = {
search: document.getElementById('search').value,
filter: document.getElementById('filter').value,
page: currentPage
};
saveToUrl(data);
};
// Restore state when page loads
const state = loadFromUrl();
if (state) {
document.getElementById('search').value = state.search;
document.getElementById('filter').value = state.filter;
currentPage = state.page;
}No build step needed. Works in all modern browsers. Your users get shareable links, customizable UI, or validated storage — depending on which tools you chose.
Let users share product filter combinations via URL.
import { saveToUrl, loadFromUrl }
from './url-state.js';
// When filters change
function onFilterChange() {
saveToUrl({
category: 'shoes',
size: [40, 42],
color: 'black',
sort: 'price-asc',
page: 1
});
}
// On page load
const f = loadFromUrl();
if (f) applyFilters(f);Let clients customize your product's look without code.
import { init, applySaved }
from './web-editor.js';
// On every page load — apply
// client's saved customizations
applySaved();
// Admin page — show editor
if (isAdmin) {
init();
}Validate user input before persisting to storage.
import { rule, guardedSet }
from './data-guard.js';
const rules = [
rule('name', 'string', 'nonempty'),
rule('email', 'email'),
rule('age', 'int', 'positive'),
rule('website', 'url'),
];
const result = guardedSet(
'settings', formData, rules
);
if (!result.saved) {
showErrors(result.errors);
}Everything you need to get started and troubleshoot.
The fastest way to use Web Protocols:
<script type="module"> tag to your HTML<script type="module">
import { saveToUrl } from './index.js';
saveToUrl({ page: 1, filter: 'new' });
</script>Store and restore state from the URL:
saveToUrl(obj) — saves object to URLloadFromUrl() — reads object from URLcreateUrl(base, obj) — builds a shareable linkencodeState(obj) — returns compressed stringdecodeState(str) — decompresses back to objectURL parameter key defaults to s. Pass a custom key as the second argument.
Add a visual CSS editor to any page:
init() — opens the editor panelapplySaved() — applies saved styles silentlygetStyles() — returns all stored overridesclearStyles() — removes all saved stylesStyles are saved per CSS selector in localStorage under the key web-editor-live-styles.
Validate data before saving:
rule('field', ...checks) — define a rulevalidate(data, rules) — check without savingguardedSet(key, data, rules) — validate + savecreateGuard(rules) — reusable storage wrapperaddValidator(name, fn) — add custom validatorsBuilt-in checks: string, number, boolean, email, url, nonempty, array, object, int, positive
Web Protocols works in all modern browsers:
No polyfills needed. No transpilation required.
If you run into issues or have questions:
Contributions are welcome. Feel free to submit a Pull Request.
Customize this website. This section itself uses Web Protocols tools.
Switch the website language. Your preference is saved to localStorage using Data Guard.
Customize the look of this website. Uses Web Editor Live under the hood.
Simple rules. Use freely, just do not resell or claim as yours.
Use it inside your projects for free — websites, apps, SaaS products, anything. Just do not take the library itself and sell it or republish it as if you made it.
Modified MIT License. See the full LICENSE file on GitHub.
All tools run 100% client-side. No data is ever sent to any server. No cookies, no analytics, no tracking. URL State stores data in the URL. Web Editor and Data Guard store data in localStorage.
Questions? Open an issue on GitHub or reach out to @vbtronic.