s

Lexical Playground
Lexical Logo

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/react. 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/react" { 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 variou"
  | ├ (47) text "s plugins in the t" { format: bold, italic, underline }
  | ├ (48) text "oolbar. You can also use "
  | ├ (46) hashtag "#hashtags"
  | └ (45) 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 "
    ├ (43) emoji "🙂" { mode: token }
    └ (42) text "."

 selection: range  
  ├ anchor { key: 2, offset: 8, type: text }
  └ focus { key: 2, offset: 8, type: text }

 commands:
  └ 22. { type: FORMAT_TEXT_COMMAND, payload: underline }
  └ 23. { type: FOCUS_COMMAND, payload: FocusEvent }
  └ 24. { type: CAN_UNDO_COMMAND, payload: true }
  └ 25. { type: SELECTION_CHANGE_COMMAND, payload: undefined }
  └ 26. { type: CLICK_COMMAND, payload: PointerEvent }
  └ 27. { type: FOCUS_COMMAND, payload: FocusEvent }
  └ 28. { type: FOCUS_COMMAND, payload: FocusEvent }
  └ 29. { type: SELECTION_CHANGE_COMMAND, payload: undefined }
  └ 30. { type: CLICK_COMMAND, payload: PointerEvent }
  └ 31. { type: SELECTION_CHANGE_COMMAND, payload: undefined }

 editor (v0.17.1+dev.esm):
  └ namespace Playground
  └ editable true