PWAxcode Documentation
Learn the essentials, then dive deeper—usage, the Step Player DSL, custom languages, and full theming.
PWAxcode is a lightweight, batteries-included code viewer/editor for docs, blogs, and apps. It ships with highlighting, folding,
search, a guided “Player” for interactive tutorials, and a clean API for runtime control. Start here for a quick overview and jump
into the dedicated sections when you’re ready.
Add a snippet in HTML, configure via data-attributes or JavaScript, and you’re set.
<!-- Minimal snippet (auto-init via data-attributes) -->
<div class="container PWAxcode"
data-lang="js"
data-maxheight="320px"
data-wrap="true"
data-footer-controls="prev,next,fullscreen,progress">
<div class="container-title">
<span class="title-text">Hello PWAxcode</span>
</div>
<div class="container-body">
<pre><code data-lang="js">console.log('Hello!');</code></pre>
</div>
<div class="container-footer"></div>
</div>
// Programmatic init (equivalent)
const el = document.querySelector('.PWAxcode');
const pxc = new PWAxcode(el, {
lang: 'js',
maxHeight: '320px',
wrap: true,
footerControls: ['prev','next','fullscreen','progress']
});
// Toggle highlight and show tokens
pxc.setOption('highlight', true);
pxc.setOption('showTokens', false);
All runtime APIs, display & layout controls, search/folding/ruler, state & persistence, and events.
Script tutorials with steps that type, search, popover, pause, and branch. Includes transport controls.
Register a language: detection, tokenization, auto-indent. Walkthrough plus a complete Arduino example.
CSS hooks for tokens/lines/UI, custom themes, and localization (i18n) with runtime locale switching.
Five-minute demo: Step Player
The Player turns a small JSON array into a guided demo. Load steps, then play/pause/prev/next—or control it via API.
const steps = [
{ action:'clear' },
{ action:'set', args:{ code:'<h2>Footer</h2>\n<footer>old footer</footer>\n', typed:true } },
{ waitMs: 300 },
{ action:'searchThenPopover',
args:{
query:'<footer>',
options:{ inline:true, inlineHL:true, viewOffsetPx:64 },
popover:{ title:'Found', content:'Here is the footer.', direction:'bottom' }
}
},
{ action:'search', args:{ query:'old footer', options:{ inline:true, inlineHL:true } } },
{ action:'delete', args:{ line:2, from:8, to:18, typed:true } },
{ action:'cursorInsert', args:{ code:'new footer', typed:true } },
{ pause:true, note:'Pause so readers can review the change.' }
];
pxc.loadSteps(steps, { autoplay:false });
/* Also available:
pxc.playerPlay(); pxc.playerPause();
pxc.playerNext(); pxc.playerPrev(); pxc.playerGoto('label'|index);
*/
- Line/column indices: lines are 1-based; columns are 0-based; range
to is exclusive.
- Data-attributes: kebab-case in HTML maps to camelCase options in JS; constructor/runtime options override data-attrs.
- Sizing: numeric values are pixels; strings accept CSS lengths (e.g.,
420px, 50vh).
- Booleans: accept
true/false and 1/0 in HTML.
Accessibility & Performance at a glance
- Focusable fold summaries and toolbar controls; Enter/Space toggles folds.
- Prefer a
maxHeight container to keep the DOM compact and scrollable.
- For large files, start with
highlight: false and allow toggling.
- Use a sensible
typingCPS for demos; respect prefers-reduced-motion in your CSS.
