TweakTags Documentation npm GitHub

Edit this page, right now.

This is a working copy of TweakTags running entirely in your browser. There is no server and no sign up: the backend is a small script that keeps the content in memory, so nothing you do here leaves this tab, and a refresh puts everything back.

  1. Click Sign in in the bar at the bottom right.
  2. Use the demo account:
    admin@example.com  /  password
    There is a second account, editor@example.com  /  password, if you want to see what an editor sees.
  3. Click Edit page. The editable spots pick up a dashed outline.
  4. Click the heading or the paragraph below and type. Try the toolbar on the rich text.
  5. Scroll to the three cards. Every line in them is its own tag, so a component is edited piece by piece rather than as one block.
  6. Grab the bar anywhere that is not a button and drag it out of your way.
  7. Click Save, then reload the page to see it come back from the store.
acme-lumber.example.com

Acme Lumber

Hardwood flooring, decking, and custom millwork since 1974.

Request a quote

Most popular

White Oak

Rift and quartersawn, kiln dried to 7 percent. Sold by the board foot.

$14.50 / bf

New this month

Black Walnut

Wide stock from our own yard, steamed or unsteamed. Ask for the figured lift.

$22.00 / bf

Clearance

Poplar Shorts

Under four feet, paint grade, perfect for jigs and shop furniture.

$3.25 / bf
What just happened. The heading, the paragraph, and the banner image are ordinary HTML elements that each carry a data-tweaktags-* attribute, and so is every line of the three cards below them. TweakTags crawled the page, loaded the saved content, and made those elements editable for the signed in user. Everyone else sees the saved content and nothing else. That is the whole idea: you bolt it onto a site you already have, instead of rebuilding the site around a CMS.
Try managing users. Signed in as the admin, open Users in the bar. You can add somebody, change a role, reset a password, or delete a user. The rules are worth poking at, because the backend enforces them rather than the buttons hiding them:

Ready to put it on your own site? The quick start takes about ten minutes, or install the front door package with npm install tweaktags.