Lexical Vue Demo

Welcome to the playground

In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.

The playground is a demo environment built with lexical-vue. Try typing in some text with different formats.

Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!

If you'd like to find out more about Lexical, you can:

Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.

 root
  ├ (1) heading  
  | └ (2) text  "Welcome to the playground"
  ├ (3) quote  
  | └ (4) text  "In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting."
  ├ (5) paragraph  
  | ├ (6) text  "The playground is a demo environment built with "
  | ├ (7) text  "lexical-vue" { format: code }
  | ├ (8) text  ". Try typing in "
  | ├ (10) text  "some text" { format: bold }
  | ├ (11) text  " with "
  | ├ (12) text  "different" { format: italic }
  | └ (13) text  " formats."
  ├ (14) paragraph  
  | ├ (15) text  "Make sure to check out the various plugins in the toolbar. You can also use "
  | ├ (43) hashtag  "#hashtags"
  | └ (42) text  " or @-mentions too!"
  ├ (16) paragraph  
  | └ (17) text  "If you'd like to find out more about Lexical, you can:"
  ├ (18) list  
  | ├ (19) listitem  
  | | ├ (20) text  "Visit the "
  | | ├ (21) link  "https://lexical.dev/"
  | | | └ (22) text  "Lexical website"
  | | └ (23) text  " for documentation and more information."
  | ├ (24) listitem  
  | | ├ (25) text  "Check out the code on our "
  | | ├ (26) link  "https://github.com/facebook/lexical"
  | | | └ (27) text  "GitHub repository"
  | | └ (28) text  "."
  | ├ (29) listitem  
  | | ├ (30) text  "Playground code can be found "
  | | ├ (31) link  "https://github.com/facebook/lexical/tree/main/packages/lexical-playground"
  | | | └ (32) text  "here"
  | | └ (33) text  "."
  | └ (34) listitem  
  |   ├ (35) text  "Join our "
  |   ├ (36) link  "https://discord.com/invite/KmG4wQnnD9"
  |   | └ (37) text  "Discord Server"
  |   └ (38) text  " and chat with the team."
  └ (39) paragraph  
    ├ (40) text  "Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance "
    ├ (46) emoji  "🙂" { mode: token }
>   └ (45) text  "."

 selection: range 
  ├ anchor { key: 45, offset: 1, type: text }
  └ focus { key: 45, offset: 1, type: text }

 commands:
  └ { type: UNKNOWN, payload: undefined }

 editor:
  └ namespace nzugb
  └ editable true