# Post editor guide Posts and contributions use the same editor on Boutlet. Add the elements you need, whether you are sharing a quick thought or a longer account with supporting material. The editor uses **Notion-style block editing**. Paragraphs, headings, lists, and images are individual blocks. Add blocks and rearrange them to build your post. The examples in this guide use the same body renderer as published posts. In **Markdown view**, each example uses the same conversion as a post. Colors, alignment, and some media presentation may differ between views. ## Find and add blocks with `/` 1. Type `/` on an empty line. 2. Enter a block name or search term. 3. Click an item, or use the up and down arrow keys and press Enter. The text after `/` is a **search term** for the menu. You do not need to memorize complete commands; find the block you want and select it. | Block | Search examples | | ------------------------- | ---------------------------------------- | | Paragraph | `/paragraph` | | Headings 1–6 | `/h1`, `/h2`, `/h3`, `/h4`, `/h5`, `/h6` | | Bulleted or numbered list | `/bullet`, `/numbered`, `/ul`, `/ol` | | Checklist | `/check` | | Quote | `/quote` | | Code block or table | `/code`, `/table` | | Image or video | `/image`, `/video` | | Image slider | `/gallery`, `/slider` | | Divider | `/divider` | You can also open the menu with the **`+`** button beside a block. Headings and media are also available from the toolbar above the editor. ## Text and headings ### Paragraphs and headings Start typing to create a paragraph. Press Enter to start the next block, or Shift+Enter to add a line break within the current paragraph. Headings have six levels. Search for a level such as `/h2`, or choose one from the heading menu in the top toolbar. Heading 2 and Heading 3 work well for sections within a post. At the start of a line, type `#` followed by a space to create Heading 1, or `##` followed by a space for Heading 2. **Result example** # What I found ## My setup ### Steps I tried #### Differences I noticed ##### Sources I checked ###### Open questions ### Text formatting Select text to open the formatting toolbar. You can apply **bold**, italics, underline, strikethrough, and inline code, change text and background colors, and adjust alignment for supported blocks. To add a link, select the text and enter its URL with the link tool. Inline code is useful for short commands or names that should stand out from the surrounding text. **Result example** **An important point** · *An extra thought* · A detail to note · ~~Earlier wording~~ · `functionName` [Explore Boutlet](https://www.boutlet.io/) ### Quotes Use a quote block for an excerpt or a statement you want to set apart. Choose `/quote` and enter the text. Include a source link when quoting someone else's material. A quote block formats text within your post. It is separate from quoting another Boutlet post, which creates a connection between posts. **Result example** > The same steps gave different results in different setups. ## Lists Use a bulleted list for related points, a numbered list for a sequence, and a checklist for items to check off. | List | How to add it | | ------------- | -------------------------------------------------------------------------- | | Bulleted list | Choose `/ul`, or type `-` followed by a space at the start of a line. | | Numbered list | Choose `/ol`, or type `1.` followed by a space at the start of a line. | | Checklist | Choose `/check`, or type `[ ]` followed by a space at the start of a line. | Press Enter to add an item. Press Enter again on an empty list item to return to a paragraph. Use the same list type for nested items. Numbered lists start at 1. Change checklist states while writing or editing. Published posts display the state saved by the author. **Result example** - Keep a record of the screens you checked. - Compare the differences you noticed. 1. Describe your setup. 2. Explain your steps and results. - [x] Check the sources - [ ] Try another setup ## Code, tables, and dividers ### Code blocks Choose `/code` to share multiple lines of code or commands. Select the appropriate language from the block's language menu for syntax highlighting, or use plain text. Code blocks display code; they do not run it. **Result example** ```typescript type Observation = { setup: string; result: string }; const observation: Observation = { setup: "mobile", result: "checked", }; ``` ```javascript const observations = ["first attempt", "second attempt"]; observations.forEach((item) => console.log(item)); ``` ### Tables Choose `/table` and enter text in each cell. Use the row and column handle menus to add or remove rows and columns. Tables are useful for comparisons. Put the names of the things being compared in the first row, and keep the number of columns and cell contents manageable on small screens. **Result example** | What I checked | First attempt | Second attempt | | On-screen guidance | A short description | An explanation with an example | | What was unclear | The purpose of the request | Needs another check | ### Dividers Use `/divider` to mark a change of topic within your post. **Result example** That covers what I checked directly. --- Next are the questions I still need to look into. ## Images and video ### Images Choose `/image` or the image button in the top toolbar, then upload a file from your device. You can also drag image files into the editor or paste an image from the clipboard. Explain what an image shows so others can understand your experience or findings. Use images you can share publicly, and check screenshots for personal information before uploading. **Result example**  > Caption: Connect what you observed with the material that supports it. ### Image sliders and galleries Choose `/gallery` or `/slider` to group several images into a slider. The gallery button in the top toolbar also lets you select multiple images. Add images and arrange their order in the slider editor. An image block's handle menu includes **Show as slider**, and a slider's menu includes **Show as separate images**, so you can choose the layout that suits your post. **Result example** -  > Compare both attempts using the same criteria\. -  > Connect each result with its supporting material\. ### Video Choose `/video` or the video button in the top toolbar, then upload your file. Wait for uploading and video processing to finish before publishing. Uploaded videos and external video embeds use different insertion methods. To add a YouTube video, paste its URL as described below. **Result example** [A short recording can show how something changes over time.](/docs/editor/demo.mp4) ## Links and external widgets ### Link previews Paste a webpage URL by itself into an empty paragraph to turn a supported address into a link preview or external widget. A regular webpage may appear as a card with a title, description, and image. The card may have less information if the site does not provide it or the page cannot be accessed. To link words within a sentence, select the text and use the link tool instead. **Result example** [Boutlet — Discover stories. Start a conversation.](https://www.boutlet.io/) ### Supported external content Add widgets by **pasting a supported URL into an empty paragraph**. They are not selected from the `/` menu. | Service | Content you can add | | --------------------- | ------------------------------------------------------------------------------ | | YouTube | Videos | | X, Threads, Instagram | Supported public posts | | Notion | Public or published pages | | Google Workspace | Supported shared content from Docs, Sheets, Slides, Forms, Calendar, and Drive | Check the original service's sharing settings. A link you can open with your account may be unavailable to others. Adding it to Boutlet does not change access to the original content. Displaying external content connects to that service. Playback and further loading depend on the service's availability and the notices shown with the embed. **Result example** [YouTube embed example]() ## Organize blocks and save your work ### Move or delete blocks Drag the handle beside a block to move it. Click the handle to open its menu and delete a block you no longer need. To turn a paragraph into a heading or list, select its text and use the block-type menu in the formatting toolbar. Use Undo to reverse an accidental change. ### Drafts and published edits | What you are working on | How it is saved | | ----------------------------------------- | -------------------------------------------------------------------------------- | | A new post, quote, or contribution | Your draft saves automatically. Check the save status at the top before leaving. | | An already published post or contribution | Choose **Save changes** when you finish editing. | Saving a draft does not publish it. Check that file uploads and processing are complete before selecting the publish button. Contributions use these same blocks and formatting tools. Check the connected post and Reward guide at the top of the composer, and write content that can be published publicly for free. If you edit a published contribution, check whether resubmission is available to update the version used for evaluation. See [Writing and submitting contributions](signals.md) for the participation steps.