Interactive elements

Components•3 min read||

Components that respond to reader input — editable variables, tooltips, and anchors.

Editable variables

The wc-var component creates an inline editable field. When the reader changes the value, every placeholder on the page updates instantly.

Set your domain:

Set your project:

{ "name": "{{NAME}}", "url": "https://{{DOMAIN}}" } docslit build rsync -avz dist/ deploy@{{DOMAIN}}:/var/www/html/

Click the variable values above and type your own to see both code blocks update.

The variable name. Use UPPER_SNAKE_CASE. Referenced in code blocks as . The default value shown before the reader edits it. Use editable variables in quickstart guides and setup pages. Readers type their API key, project name, or domain once and every command on the page becomes copy-paste ready.

Tooltips

Add hover tooltips to provide extra context without cluttering the page:

DocsLit uses <wc-tooltip text="A lightweight framework for building web components">Lit</wc-tooltip> for its component system.

DocsLit uses Lit for its component system.

The tooltip content shown on hover. Where the tooltip appears. Options: top, bottom.

Anchors

Create linkable sections with auto-generated IDs:

<wc-anchor>Important section</wc-anchor> Important section

Hovering over an anchor reveals a link icon. Readers click it to copy the direct URL to that section.

Update entries

Display changelog entries with type badges:

<wc-update version="0.1.6" date="April 2025" type="added"> Accordion group component for visually connected collapsible sections. </wc-update> <wc-update version="0.1.6" date="April 2025" type="fixed"> Search result navigation no longer stacks path segments on nested pages. </wc-update> Accordion group component for visually connected collapsible sections. Search result navigation no longer stacks path segments on nested pages. The version number for this change. The release date. The change type badge. Options: added, changed, fixed, removed, deprecated, security.