Rich Text

The Rich Text element in Ycode allows you to add and format long-form content like blog posts, privacy policies, or product descriptions with a flexible and structured editing experience. It supports text formatting, media embedding, and can also dynamically display CMS content — all while staying fully customizable with your project’s design system.

When to Use the Rich Text Element

Use the Rich Text element when you need:

• Structured, multi-paragraph content

• Dynamic content from a CMS Collection

• Text with embedded media or other elements (like images, videos, or links)

• Markdown-style formatting that adapts to your style system

This element is ideal for articles, guides, legal pages, or any block of content that benefits from semantic formatting.

Adding a Rich Text Element

To insert a Rich Text element into your page:

1. Open the Ycode Designer.

2. In the Layers panel, click the plus icon to add elements and choose Rich Text.

Once added, you can either write static content directly in the Designer or bind it to a CMS field.

Formatting Content Inside Rich Text

The Rich Text editor supports the following formatting options:

• Headings (H1–H6) for structured content

• Paragraphs for regular body text

• Links

• Bold, Italic, Strikethrough, Superscript, Subscript

• Lists: ordered and unordered

• Blockquotes for quotes or highlights

• Code blocks for technical documentation

• Images

• Video

• Youtube

• HTML Embed

• Components that you made in Ycode

When editing Rich Text inside the canvas, you'll see a WYSIWYG toolbar to apply formatting.

When you press Enter to create a new line, a block-style menu appears — similar to Notion’s editing experience. This allows you to choose the type of content or formatting block you want to insert next.

You can also type / to quickly trigger and search this menu. For example, typing /h2 will let you select a Heading 2 element without using your mouse.

This intuitive workflow is ideal for structured content creation, whether you're writing from scratch or editing existing CMS content.

Binding CMS Content

You can use the Rich Text element to display dynamic content from your CMS Collections. This is especially useful for blog posts, product descriptions, legal documents, or any other long-form content managed through the CMS.

How to Bind Rich Text to CMS Content

To bind a Rich Text element to a field in your CMS:

1. First, place the Rich Text element inside a Collection loop. This means the page or section must already be connected to a Collection, and the Rich Text element must be nested within that dynamic structure.

2. Select the Rich Text element on the canvas.

3. In the right-hand Settings panel, open the Connect data section.

4. Choose the CMS Collection field you want to bind. This field must be of type "Rich Text".

Once connected, the Rich Text element will automatically display the content stored in that CMS field for each item in the Collection.

Styling Dynamic Rich Text

Even when pulling in dynamic content, you can still apply styling to individual tag types within the Rich Text block. For example, you can style paragraphs, headings, or list elements using the Style panel.

This ensures your CMS content follows the same visual structure and brand consistency as your static content.

Styling the Rich Text Element

Styling in Ycode is tag-specific, which means you apply styles directly to individual elements like paragraphs, headings, lists, or blockquotes inside the Rich Text block. These elements are nested within the Rich Text layer and are styled through the Layers panel.

How to Style Elements Inside a Rich Text Block

1. Select the Rich Text element on your canvas.

2. Open the Layers panel and expand the Rich Text layer to reveal its inner structure.

3. Locate and select the specific element you want to style — such as a paragraph, heading, list, or quote.

4. With that element selected, use the Style panel to change typography, color, spacing, and other visual properties.

Any styles you apply will affect all instances of that element type within the same Rich Text block. For example, styling one heading will update the appearance of all headings of the same level inside that block.

Example: Styling Headings

To style all Heading 2 elements in a Rich Text block:

• Expand the Rich Text layer in the Layers panel

• Select the heading 2 element inside it

• Use the Style panel to customize its appearance — including font size, color, line height, or margin

This gives you precise control over how each text element appears, helping ensure consistency and design alignment across your content.

Nesting Other Elements

Inside the Rich Text, you can also insert other Ycode elements like:

• Images

• Videos

• Custom embeds

• Links

• Components

These nested elements follow the same formatting rules and can be styled or repositioned as needed.

Best Practices

• Use for long-form content only — for short or styled text blocks, use the Text element instead.

• Keep styles consistent by reusing classes or using global tag styling.

• Bind to CMS for blog posts or repeatable content instead of copy-pasting.

• Test responsiveness since the Rich Text layout can vary across screen sizes.

Summary

The Rich Text element is a powerful tool for managing and displaying complex text content in your Ycode projects. Whether you’re building a blog, a knowledge base, or a detailed product guide, it lets you design flexible, editable, and styled content blocks that scale.