# Elements Source: https://docs.arcweave.com/project-items/elements Section: Project Items Description: Elements are the board items that hold your story text and build your flowcharts **Elements** are the main board items in Arcweave and the building blocks of your flowcharts. Each element holds a small fragment of your story in a **title** and a rich text **content** area. It can also carry a cover image or video, attached components and audio, [Arcscript](https://docs.arcweave.com/project-items/arcscript), and attributes. ![Arcweave's project environment with several orange rectangles emphasizing the open board's elements](https://docs.arcweave.com/assets/castle-elements.BNOtGi5V.png) By connecting elements together with [connections](https://docs.arcweave.com/project-items/connections), you create your story flow, allowing the player to make choices and progress through your game. > ✅ Play-test the flow of your elements and connections in [Play Mode](https://docs.arcweave.com/project-tools/play-mode/overview). ## Create elements Context: Arcweave docs > Project Items > Elements > Create elements ### Create independent elements Context: Arcweave docs > Project Items > Elements > Create elements > Create independent elements To create an element, do any of the following: - Double-click on an empty area of the current board. - Drag and drop the **New element icon** (at the left of the [bottom menu](https://docs.arcweave.com/project-tools/interface/bottom-menu)) on an empty area of the current board. - Right-click on an empty area of the current board and select **Create > Element** from the menu. ![Arcweave's project environment. Animated GIF image demonstrating how to create an element with three possible ways: double-clicking an empty area of the board, dragging and dropping the "new element icon", and right-clicking and selecting "create element" from the context menu.](https://docs.arcweave.com/assets/element-create.CDTQmixS.gif) ### Create connected elements Context: Arcweave docs > Project Items > Elements > Create elements > Create connected elements To create a new element that is already connected, drag a connection from an element's edge or a branch's output and drop it on an empty area of the board. In the menu that opens, select **Create element here**. See [Create connections](https://docs.arcweave.com/project-items/connections#with-drag-and-drop). When an element is selected, you can use [keyboard shortcuts](https://docs.arcweave.com/project-tools/interface/keyboard-shortcuts#element-creation-connection) to instantly create and connect a new element in one action. Press **Ctrl + Alt/Option/Cmd + an arrow key**. A new element is created and automatically connected to the first one. > ✅ The new element is automatically selected. To edit it, press **Enter** and start typing. ## Select elements Context: Arcweave docs > Project Items > Elements > Select elements Click an element to select it. To select multiple items, see [Select board items](https://docs.arcweave.com/project-tools/interface/mouse-actions#select-board-items). ## Copy an element link Context: Arcweave docs > Project Items > Elements > Copy an element link Right-click an element on the board or in the sidebar's **Boards** section and select **Copy link**. On the board, select only that element to make the action available. Opening the link centers the element on its board in the language active when you copied it. See [Share an item or board position](https://docs.arcweave.com/project-tools/share#share-an-item-or-board-position) for access requirements. ## Delete elements Context: Arcweave docs > Project Items > Elements > Delete elements To delete an element, you can do either of the following: - Select the element and press **Delete** or **Backspace**. - Right-click on it and select **Delete selection** from the menu. ## Edit elements Context: Arcweave docs > Project Items > Elements > Edit elements Each element has a **title** (the top, coloured part) and a **content** area (the main black part). To edit either, simply double-click on it. To cycle editing between title and content, press the **tab key**. Format the element's title and content using [rich text](https://docs.arcweave.com/project-tools/rich-text). To exit editing mode press **Esc** or click on an empty area of the board. > ✅ Project owners and editors can also edit element content in [Play Mode](https://docs.arcweave.com/project-tools/play-mode/using-play-mode#edit-content-in-play-mode) while playtesting, without returning to the board. ## Resize elements Context: Arcweave docs > Project Items > Elements > Resize elements To resize an element manually, select it and drag any of its corners or edges. To set it to **auto-resize**, so it continuously adjusts to fit its content, double-click any edge or corner handle. ![Arcweave's project environment. Animated GIF image demonstrating how to resize an element by dragging its bottom border.](https://docs.arcweave.com/assets/element-resize.-250_7kf.gif) ## Change element theme Context: Arcweave docs > Project Items > Elements > Change element theme To change the color theme of an element, right-click on it and select one of the available colors from the menu's color picker. ![Arcweave's project environment. The element context menu is open (revealed by right-clicking the element in the board). An orange rectangle emphasizes the section where the theme color picker is.](https://docs.arcweave.com/assets/element-change-theme.C35tM9G7.png) ## Element covers Context: Arcweave docs > Project Items > Elements > Element covers Elements can have a **cover**: an image, icon, or video that renders in [Play Mode](https://docs.arcweave.com/project-tools/play-mode/overview), above the element's text content. ![A split screen view of an Arcweave project and its Play Mode. The focus in both sides is the starting element, with orange rectangles and an arrow emphasizing how the element's cover renders as featured image in Play Mode](https://docs.arcweave.com/assets/element-cover.Bk1ScTyU.png) As covers, you can use one of the following: - [Image assets](https://docs.arcweave.com/project-items/assets/images) - [Video assets](https://docs.arcweave.com/project-items/assets/video) - Icons from Arcweave's [built-in icon library](https://docs.arcweave.com/project-tools/icon-library) - [YouTube video embeds](https://docs.arcweave.com/project-items/elements#youtube-embeds-as-element-covers) ### Assets as element covers Context: Arcweave docs > Project Items > Elements > Element covers > Assets as element covers [Images](https://docs.arcweave.com/project-items/assets/images) and [video assets](https://docs.arcweave.com/project-items/assets/video) can be assigned as element covers. In Play Mode, both images and videos are rendered above the element's text content. > ℹ️ For configuring video asset playback behavior, see the page on [Video assets](https://docs.arcweave.com/project-items/assets/video#playback-behavior). #### Drag and drop assets to set as element covers Context: Arcweave docs > Project Items > Elements > Element covers > Assets as element covers > Drag and drop assets to set as element covers To easily assign an image or video asset, drag it from the [Assets section](https://docs.arcweave.com/project-items/assets/overview#assets-section) of your project and drop it into the element. ![Arcweave's project environment. Animated GIF image demonstrating how you can drag an asset from the Assets section into an element, to assign it as element cover.](https://docs.arcweave.com/assets/element-cover-drag.CdV_QxYB.gif) #### Use context menu to set element covers Context: Arcweave docs > Project Items > Elements > Element covers > Assets as element covers > Use context menu to set element covers You can also assign a cover to an element using the element's context menu. This opens your options to icons, YouTube embed, and image generation. To set a cover using the context menu: 1. Right-click on the element. 2. Select **Cover > Set cover** in the context menu. ![Screenshot of Arcweave's project environment. The element context menu is open, and an orange rectangle is emphasizing the "Set cover" option.](https://docs.arcweave.com/assets/element-set-cover-menu.CCl43IkV.png) 3. Select a tab: - **My Assets**: Select an [image](https://docs.arcweave.com/project-items/assets/images) or [video asset](https://docs.arcweave.com/project-items/assets/video). - **Icon Library**: Select an icon from Arcweave's built-in [icon library](https://docs.arcweave.com/project-tools/icon-library). - **Embed**: Embed a YouTube video. (See [below](https://docs.arcweave.com/project-items/elements#youtube-embeds-as-element-covers)) - **Generate**: Use Arcweave's [Image generator](https://docs.arcweave.com/project-tools/ai-features/image-generator) to generate a cover. ![The modal for setting an element cover, open at the My Assets tab, showing the project's available image assets.](https://docs.arcweave.com/assets/element-set-cover-modal.CbIq1-uM.png) 4. Choose an image or video asset, an icon, or paste a YouTube video URL, accordingly. > ℹ️ To use your own images in a project, you must upload them as [assets](https://docs.arcweave.com/project-items/assets/overview). ### YouTube embeds as element covers Context: Arcweave docs > Project Items > Elements > Element covers > YouTube embeds as element covers You can embed a YouTube video as an element cover. In Play Mode, embedded YouTube videos are rendered above the element's text content. To embed a YouTube video as an element cover, perform the following steps: 1. Right-click the element and select **Cover > Set cover** in the context menu. 2. Select the **Embed** tab. 3. Paste a YouTube video URL in the relevant field. 4. Configure video's playback behavior: - **Autoplay**: Video plays automatically when element loads. - **Show controls**: Player has access to video controls (play, pause, seek bar). 5. Click **Embed Video**. ![Arcweave's project environment. An element's "Set cover" modal is open, and an orange arrow is pointing at the "Embed" tab.](https://docs.arcweave.com/assets/element-set-cover-modal-embed.CD0VIuMp.png) ### Generate covers Context: Arcweave docs > Project Items > Elements > Element covers > Generate covers You can also use Arcweave's Image Generator to do either of the following: - [Generate element covers](https://docs.arcweave.com/project-tools/ai-features/image-generator#set-covers): Submit a prompt and image orientation preferences; Arcweave generates a relevant image and assigns it as the element cover. ![Arcweave's project environment. An element's "Set cover" modal is open, and an orange arrow is pointing at the "Generate" tab.](https://docs.arcweave.com/assets/element-set-cover-modal-generate.8bMrfeKi.png) - [Auto-generate element covers](https://docs.arcweave.com/project-tools/ai-features/image-generator#auto-generate-covers): Let Arcweave generate an element cover using the element title and content as context, without requiring a prompt. Right-click the element and select **AI > Auto-generate cover**. ![Screenshot of Arcweave's project environment. The element context menu is open, and an orange rectangle is emphasizing the "Auto-generate cover" option.](https://docs.arcweave.com/assets/element-set-cover-menu-autogenerate.D4c_9tEn.png) > ✅ For detailed instructions, see [Image Generator](https://docs.arcweave.com/project-tools/ai-features/image-generator). ### Change element covers Context: Arcweave docs > Project Items > Elements > Element covers > Change element covers To change an element's cover, simply set a new cover to the element in any of the ways described above. ### Remove element covers Context: Arcweave docs > Project Items > Elements > Element covers > Remove element covers To remove an element's cover, right-click on the element and select **Cover > Remove cover**. ## Audio attachments Context: Arcweave docs > Project Items > Elements > Audio attachments Elements can optionally have one or more attached audio assets. The audio assets play during [Play Mode](https://docs.arcweave.com/project-tools/play-mode/overview), upon the element's rendering, as loops or one-shots. ### Attach audio assets Context: Arcweave docs > Project Items > Elements > Audio attachments > Attach audio assets To attach an audio file to an element, take the following steps: 1. Upload the audio file to your project (see [Assets](https://docs.arcweave.com/project-items/assets/overview#upload-assets)). 2. Locate the asset in your project's **Assets** section. 3. Drag and drop the asset from your **Assets** section into the element. Once attached, click the asset on the element to open its **Audio reference** dialog, where you can set its behavior, delay, fades, volume, and auto-stop. See [Audio reference settings](https://docs.arcweave.com/project-items/assets/audio#audio-reference-settings). ### Move audio assets Context: Arcweave docs > Project Items > Elements > Audio attachments > Move audio assets To **move** audio assets between elements, drag them from one element and drop them into another. ### Remove audio assets Context: Arcweave docs > Project Items > Elements > Audio attachments > Remove audio assets To **remove** an attached audio asset, drag and drop it from the element to an empty area of the board. > ℹ️ Removing an audio asset from an element simply removes the reference and does not delete the asset. ## Attach components Context: Arcweave docs > Project Items > Elements > Attach components You can attach components to an element to visually reference them in the story flow, both in the boards and in Play Mode. See [components](https://docs.arcweave.com/project-items/components) for all information. To share an attached component, right-click its reference on the board and select **Copy link**. The link opens the component's dialog. See [Copy a component link](https://docs.arcweave.com/project-items/components#copy-a-component-link). ## Add Arcscript Context: Arcweave docs > Project Items > Elements > Add Arcscript You can add [Arcscript segments](https://docs.arcweave.com/project-items/arcscript#arcscript-segments) to your element content, assigning values to variables or manipulating the text output. ![A label and an element with contents that include rich text and Arcscript code.](https://docs.arcweave.com/assets/element-label-richtext-arcscript.CBFrUdz9.png) To insert an Arcscript segment into an element's content, see [Add Arcscript](https://docs.arcweave.com/project-items/arcscript#add-arcscript) on the Arcscript page. ## Element properties Context: Arcweave docs > Project Items > Elements > Element properties To access an element's properties, right-click the element and select **Properties**. This opens the element's Properties panel, which has the following tabs: - **Attributes**: The element's [attributes](https://docs.arcweave.com/project-items/attributes), if any. - **Details**: Element ID, word count, and character count. ### Attributes Context: Arcweave docs > Project Items > Elements > Element properties > Attributes An element's **Attributes** tab contains the element's attributes, if any. An element can hold the following four types of attributes: - Rich Text Field - String Field - Component List - Asset List > ℹ️ These four types are also available to [boards](https://docs.arcweave.com/project-items/boards) and [components](https://docs.arcweave.com/project-items/components). Boards and components additionally support Boolean, Integer, and Float attributes; together with String Field, they act as [scoped variables](https://docs.arcweave.com/project-items/variables/overview#variable-scope). To [add](https://docs.arcweave.com/project-items/attributes#create-attributes), [edit](https://docs.arcweave.com/project-items/attributes#edit-attributes), or [remove](https://docs.arcweave.com/project-items/attributes#delete-attributes) an element's attributes, see the **Attributes** page. ### Details Context: Arcweave docs > Project Items > Elements > Element properties > Details An element's **Details** tab contains the following information: #### Element ID Context: Arcweave docs > Project Items > Elements > Element properties > Details > Element ID Each element has a **unique identifier** in the form of: `81a30674-aa09-4eb8-8484-59298d37f984` (version 4 UUID) Uses of this element ID include: - Accessing the element in the project's [JSON](https://docs.arcweave.com/integrations/json). - Targeting the element for CSS styling in the [Style Editor](https://docs.arcweave.com/project-tools/play-mode/style-editor); see the [CSS basics guide](https://docs.arcweave.com/tutorials/style-editor/css-basics#style-specific-elements). #### Word count Context: Arcweave docs > Project Items > Elements > Element properties > Details > Word count The element Details tab includes a word count breakdown: - Words in title - Words in content - Total words It shows the same breakdown for characters: **Characters in title**, **Characters in content**, and **Total characters**. > ℹ️ Word and character counts do not include Arcscript segments in the element's content (see [Add Arcscript](https://docs.arcweave.com/project-items/elements#add-arcscript) above). ## Element references Context: Arcweave docs > Project Items > Elements > Element references Arcweave provides easy access to an element's **references**. These can be: - The **jumpers** targeting the element - The **Arcscript expressions** that mention the element (e.g. a `visits()` expression—see syntax of [`visits` function in Arcscript page](https://docs.arcweave.com/project-items/arcscript#visits).) To access an element's references: 1. Right-click the element, in either of the two locations: - In the board where it lies ![Screenshot of Arcweave's project environment. The element context menu is open (revealed by right-clicking an element in the current board), and an orange rectangle is emphasizing the "References" option.](https://docs.arcweave.com/assets/elements-references-menu-inboard.VkWV16vw.png) - In the **Boards** section of the left sidebar ![Screenshot of Arcweave's project environment. The element context menu is open (revealed by right-clicking an element in the Boards section of the sidebar), and an orange rectangle is emphasizing the "References" option.](https://docs.arcweave.com/assets/elements-references-menu-boardsection.BByWPy8k.png) 2. Select **References**. In the modal that opens, you will see all references of the element in elements, jumpers, connection labels, and branches. ![Screenshot of Arcweave's project environment. The element references modal is open, showing the element's references.](https://docs.arcweave.com/assets/elements-references-modal.lRnP9Fas.png) To visit any of the referencing items, **click on the reference**. > ✅ Use the modal's left sidebar to view all references or to filter the ones in elements, jumpers, connection labels, or branches.