wryte preview

A tag-first (markdown) rich text editor with a Trix-compatible API, built on ProseMirror. Markdown is the source of truth: element.value always matches what you see. The editor never uploads anything itself — uploads, embeds and external images are delegated to your wryte-* listeners, and every change bubbles up as a DOM event.

1 Full-featured editor

No toolbar by default — formatting lives in the selection bubble, the (+) menu and the context menu. Type markdown (try # , > , - or a bare URL on an empty line) or drive it from JavaScript with the buttons below.

Markdown value

What element.value returns — live on every change.


          

          

            
Live state

            
Selection, active attributes and undo/redo, read straight from the API.

            

          

        


        

          
Drive it from JavaScript

          

            These buttons call the same public API the editor exposes — insertString,
            insertEmbed, insertFile, insertHorizontalRule,
            toggleAttribute, undo/redo and clear.
          

          

        


        

          
Events

          
Everything bubbles as a wryte-* event — the last 12, with a hint of their payload.

          

        

      


      

        
2 With a toolbar

        

          The same editor, wired to an explicit <wryte-toolbar> element via
          toolbar="toolbar". Includes a link dialog (link button or ⌘K) and a
          file picker that runs the same upload pipeline.
        

        
        
        

      


      

        
3 Restricted editor abilities whitelist

        

          Sandboxed with abilities="bold, italic, strike, quote, list": only those
          capabilities are enabled, so headings, links, code, embeds and images are off, and the
          menus simply omit their buttons.
        

        
        

      


      

        
4 Placeholder & read-only

        

          An empty editor shows its placeholder (driven by data-wryte-empty); the
          second was created with the disabled attribute — its content stays selectable
          and copyable, but nothing can be typed, dropped or pasted, and the bubble / (+) menus
          stay hidden.
        

        
        
      


      

        
5 Grouped buttons attributeGroups

        

          The bubble and toolbar show separate bold / italic / strike buttons by default.
          Setting groups="bold, italic, strike; spoiler, code" merges them back into the
          old Trix-style cycling buttons: the first group steps none → bold → italic → strike → none, the
          second none → spoiler → code → none. An empty <wryte-toolbar> is generated
          from the same config.