Document commands
This is the JavaScript used by the first playground preset. Edit and run it in the interactive playground, including its HTML and CSS.
import '@wieslawsoltes/ribbon-web';
const ribbon=document.querySelector('#ribbon');
ribbon.setAttribute('theme',document.documentElement.dataset.theme);
const heading=document.querySelector('#heading');
heading.style.fontWeight='400';
const command=(label,action)=>()=>{action();document.querySelector('#status').textContent=label+' applied';console.log(label);};
ribbon.model={tabs:[
{id:'home',header:'Home',keyTip:'H',groups:[{id:'format',header:'Typography',items:[
{id:'bold',type:'button',label:'Bold',icon:'bold',size:'large',command:command('Bold',()=>heading.style.fontWeight=heading.style.fontWeight==='400'?'700':'400')},
{id:'italic',type:'button',label:'Italic',icon:'italic',command:command('Italic',()=>heading.style.fontStyle=heading.style.fontStyle==='italic'?'normal':'italic')},
{id:'accent',type:'button',label:'Accent',icon:'font-color',command:command('Accent',()=>heading.style.color='#ab83eb')}
]},{id:'document',header:'Document',items:[{id:'reset',type:'button',label:'Reset style',icon:'undo',command:command('Reset',()=>heading.removeAttribute('style'))}]}]},
{id:'insert',header:'Insert',keyTip:'I',groups:[{id:'content',header:'Content',items:[
{id:'quote',type:'button',label:'Add a thought',icon:'text',size:'large',command:command('Thought',()=>document.querySelector('#copy').textContent='Great tools make space for the work, not themselves.')}
]}]},
{id:'view',header:'View',keyTip:'V',groups:[{id:'zoom',header:'Presentation',items:[{id:'large',type:'button',label:'Larger type',icon:'zoom-in',command:command('Larger type',()=>heading.style.fontSize='48px')},{id:'small',type:'button',label:'Smaller type',icon:'zoom-out',command:command('Smaller type',()=>heading.style.fontSize='28px')}]}]}
]};
console.log('RibbonWeb commands are connected to the live preview.');Show the HTML host
<ribbon-web id="ribbon"></ribbon-web><div class="panel" style="margin-top:24px"><p class="hint">LIVE DOCUMENT PREVIEW</p><h1 id="heading">Make room for ideas.</h1><p id="copy">A ribbon can be powerful without getting in the way. Try Bold, Accent or a different tab.</p><output id="status">Ready for your next command.</output></div>How it works
Commands with context
A model describes tabs, groups and controls. The ribbon renders and routes interactions while your application owns the work.
Import the package to register
Own the lifetime
Release application-owned command subscriptions and bindings on unmount. Keep command state in a model rather than duplicating it in the UI.
The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.
Read the lifecycle guide →Know the contract
Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/ribbon-web@0.1.1.