Editor Help

Keyboard Shortcuts

Shortcut	Action
`Ctrl+S`	Export markdown file
`Delete`	Remove selected block
`Ctrl+D`	Duplicate selected block

Editor Tips

Click any block to edit its properties
Drag blocks to reorder
Use Split view to see changes live
Markdown view shows raw output
Import existing .md files to continue editing
Export saves to downloads folder

Block Types

Block	Use For
Heading	Section titles (h1-h6)
Paragraph	Body text, supports markdown
Image	Single image with caption
Code	Code snippets with syntax highlighting
Table	Data tables
List	Bullet or numbered lists
Blockquote	Quoted text
Divider	Horizontal separator

Inline Hover Components

The paragraph rich text editor includes buttons to insert hover components that show tooltips when readers hover over them.

SkillHover

Insert an inline skill reference that shows skill details on hover:

html

<SkillHover id="10071">Skill Name</SkillHover>

id: The skill ID from the database
Text between tags: Display text (falls back to skill name if empty)

UmaHover

Insert an inline character reference that shows character details on hover:

html

<UmaHover cardId="100101">Special Week</UmaHover>

cardId: The character card ID from the database
Text between tags: Display text (falls back to character name if empty)

SupportCardHover

Insert an inline support card reference that shows card details on hover:

html

<SupportCardHover supportCardId="30001">Support Card Name</SupportCardHover>

supportCardId: The support card ID from the database
Text between tags: Display text (falls back to card name if empty)

GlossaryHover

Insert an inline glossary term reference that shows the term's definition on hover. Insert via the Term button in the editor toolbar, which opens a glossary search.

html

<GlossaryHover term="Accel Zone">Accel Zone</GlossaryHover>

term: The glossary term name (aliases also work, e.g. term="Final Leg")
Text between tags: Display text (falls back to the term name if empty)
The tooltip shows the definition, aliases, and a link to the full glossary page

Examples:

The Accel Zone is where acceleration skills matter most.

Custom display text: don't fail your chain events.

Alias lookup: Accel Zone resolves to the same entry as Accel Zone.

Inline Icons

Insert small inline icons via the Icons dropdown in the editor toolbar. All render at text height and flow with the surrounding text.

Stat icons (Speed, Stamina, Power, Guts, Wit):

html

<TypeIcon type="speed" />

type: speed, stamina, power, guts, wit

Running style icons (Front Runner, Pace Chaser, Late Surger, End Closer):

html

<StyleIcon type="front" />

type: front, pace, late, end

Grand Live token icons (Dance, Passion, Vocal, Visual, Mental):

html

<GLIcon type="dance" />

type: dance, passion, vocal, visual, mental

SupportCardStats

Display a support card's stat progression table:

html

<SupportCardStats supportCardId="30001" />

supportCardId: The support card ID from the database
Shows effect values at each level breakpoint
Highlights unique effect bonuses

DeckShowcase

Display high-res support card decks. Three usage modes:

Single deck:

html

<DeckShowcase name="Speed Deck" cards="30001 30002 30003 30004 30005 30036" />

Speed Deck

Multiple decks (compact string, pipe-separated):

html

<DeckShowcase
  decks="Speed: 30001 30002 30003 30004 30005 30036 | Wit: 30010 30054 30068 30001 30019 30036"
  columns="2"
/>

Speed

Wit

Multiple decks (slot-based, most flexible):

html

<DeckShowcase columns="3">
  <DeckShowcaseItem name="Speed" cards="30001 30002 30003 30004 30005 30036" />
  <DeckShowcaseItem name="Wit" cards="30010 30054 30068 30001 30019 30036" />
  <DeckShowcaseItem name="Balanced" cards="30001 30019 30010 30054 30036 30068" />
</DeckShowcase>

Speed

Wit

Balanced

cards: Space-separated support card IDs (commas also work)
name: Optional label shown above the deck
decks: Pipe-separated deck definitions in format Name: id1 id2 id3 id4 id5 id6
columns: Number of columns in the grid (defaults to number of decks, max 3)
size: "small" (25% width), "default" (50% width), "large" (full width)
Each card links to its detail page and renders with frame, type icon, and rarity badge

Sizes:

Small:

Small

Default:

Default

Large:

Large

AgendaShowcase

Embed a read-only race agenda from the Agenda Planner. Build your plan in the planner, click Share, and paste the share link (or just its data= code) into the component:

html

<AgendaShowcase
  name="Example URA Route"
  data="https://uma.guide/agenda-planner/?data=a2%7C15.9u.4j.4u.53"
/>

Example URA Route5 races · 5 G1Open in Agenda Planner

Junior Year

Early Jan

Late Jan

Early Feb

Late Feb

Early Mar

Late Mar

Early Apr

Late Apr

Early May

Late May

Early Jun

Late Jun

Early Jul

Late Jul

Early Aug

Late Aug

Early Sep

Late Sep

Early Oct

Late Oct

Early Nov

Late Nov

Early Dec

Late Dec

Classic Year

Early Jan

Late Jan

Early Feb

Late Feb

Early Mar

Late Mar

Early Apr

Late Apr

Early May

Late May

Yasuda Kinen

Early Jun

Late Jun

Early Jul

Late Jul

Early Aug

Late Aug

Early Sep

Late Sep

Mile Championship Nambu Hai

Early Oct

Late Oct

Early Nov

Late Nov

Early Dec

Late Dec

Senior Year

Early Jan

Late Jan

Early Feb

Late Feb

Early Mar

Late Mar

Early Apr

Late Apr

Early May

Late May

Early Jun

Late Jun

Early Jul

Late Jul

Early Aug

Late Aug

Early Sep

Late Sep

Early Oct

Tenno Sho (Autumn)

Late Oct

Early Nov

Japan Cup

Late Nov

Early Dec

Arima Kinen

Late Dec

The share code alone also works:

html

<AgendaShowcase data="a2|15.9u.4j.4u.53" />

Props:

data (required): Agenda Planner share link, data=... query string, or raw share code
name: Optional title shown above the calendar (defaults to "Race Agenda")

Readers get an "Open in Agenda Planner" link that loads the plan into the full planner. Insert via More → Agenda Showcase in the editor toolbar.

StatBox

Display recommended stat targets as styled boxes — matches the in-game stat UI.

Single stat:

html

<StatBox speed="1200" />

Speed

1200

Multiple stats (individual props):

html

<StatBox speed="1200" stamina="601" power="1000+" guts="901+" wit="1000+" />

Speed

1200

Stamina

601

Power

1000+

Guts

901+

Wit

1000+

Multiple stats (compact string):

html

<StatBox stats="speed:1200 stamina:601 power:1000+ guts:901+ wit:1000+" />

Speed

1200

Stamina

601

Power

1000+

Guts

901+

Wit

1000+

Props:

speed, stamina, power, guts, wit: Stat values. Append + to show a plus sign (e.g. "1000+")
stats: Compact string alternative — space or comma-separated stat:value pairs

Only stats with a value are rendered. Omit a stat to hide it.

ExpandableSection

A collapsible card with a title, up to three images, and a dropdown arrow — same style as banner reviews. Content inside the tags is shown when expanded.

Text only:

html

<ExpandableSection title="My Section">

Your content here. Supports full markdown.

</ExpandableSection>

With images (left / middle / right — all optional):

html

<ExpandableSection
  title="My Section"
  leftImage="/img/my-left.webp"
  middleImage="/img/my-middle.webp"
  rightImage="/img/my-right.webp"
>

Your content here.

</ExpandableSection>

Example — text only:

html

<ExpandableSection title="Example Section" defaultExpanded>

This text is inside the expandable section. You can use **bold**, *italic*, lists, and any other markdown here.

- Bullet one
- Bullet two

</ExpandableSection>

Example Section

This text is inside the expandable section. You can use bold, italic, lists, and any other markdown here.

Bullet one
Bullet two

Example — with images:

html

<ExpandableSection
  title="Example with Images"
  leftImage="/img/banner-reviews/badges/importance-must.webp"
  middleImage="/img/banner-reviews/badges/importance-good.webp"
  rightImage="/img/banner-reviews/badges/importance-skip.webp"
  leftAlt="Must"
  middleAlt="Good"
  rightAlt="Skip"
>

Images appear to the right of the title in the collapsed header.

</ExpandableSection>

Example with Images

Example — custom image size:

html

<ExpandableSection
  title="Example with Smaller Images"
  leftImage="/img/banner-reviews/badges/importance-must.webp"
  middleImage="/img/banner-reviews/badges/importance-good.webp"
  rightImage="/img/banner-reviews/badges/importance-skip.webp"
  imageSize="36"
>

Images are 36px tall here instead of the default 72px.

</ExpandableSection>

Example with Smaller Images

Image paths use the same root-relative format as all VitePress assets — starting with / from the public/ folder. For example, an image at docs/src/public/img/guides/my-image.webp is referenced as /img/guides/my-image.webp.

Props:

title (required): Text shown in the collapsed header
leftImage, middleImage, rightImage: Image URLs shown right of the title (all optional, use any combination)
leftAlt, middleAlt, rightAlt: Alt text for the corresponding images
imageSize: Height in pixels for all images (width scales automatically to preserve aspect ratio). Defaults to 72
defaultExpanded: Set to true to start expanded

Insert via More → Expandable Section in the editor toolbar.

Frontmatter Reference

Article Layout

Pages with author use article layout automatically. Force it without author:

yaml

---
articleLayout: true
---

Featured Guides

Display prominently on guides page:

yaml

---
featured: true
---

Order

Control the display order on the guides page. Bigger numbers appear first (higher priority):

yaml

---
order: 100
---

Guides with order appear before guides without it. Guides without order fall back to date sorting.

Thumbnail

Add a thumbnail image for guide cards on the guides index page:

yaml

---
thumbnail: /img/guides/my-thumbnail.png
---

Place images in docs/src/public/img/guides/ and reference them with the path starting from /img/.

Date

Set the publication date (used for sorting, newest first):

yaml

---
date: 2026-01-21
---

Guide Categories

Guides can belong to one or more categories. Use an array format:

Category ID	Label
`beginner`	Beginner
`race-mechanics`	Race Mechanics
`champions-meeting`	Champion's Meeting
`team-trials`	Team Trials
`career`	Career
`gacha`	Gacha
`research`	Research

Single category:

yaml

---
category: [beginner]
---

Multiple categories:

yaml

---
category: [beginner, race-mechanics]
---

Disable Custom Layouts

yaml

---
customLayout: false    # Default VitePress page layout
customHome: false      # Default VitePress home layout
---

Complete Example

yaml

---
title: My Guide Title
description: Brief description
category: [beginner, race-mechanics]
tags: [tag1, tag2]
featured: true
author: Your Name
date: 2026-01-21
thumbnail: /img/guides/my-guide.png
---

Editor Help ​

Keyboard Shortcuts ​

Editor Tips ​

Block Types ​

Inline Hover Components ​

SkillHover ​

UmaHover ​

SupportCardHover ​

GlossaryHover ​

Inline Icons ​

SupportCardStats ​

DeckShowcase ​

AgendaShowcase ​

StatBox ​

ExpandableSection ​

Frontmatter Reference ​

Article Layout ​

Featured Guides ​

Order ​

Thumbnail ​

Date ​

Guide Categories ​

Disable Custom Layouts ​

Complete Example ​

Editor Help

Keyboard Shortcuts

Editor Tips

Block Types

Inline Hover Components

SkillHover

UmaHover

SupportCardHover

GlossaryHover

Inline Icons

SupportCardStats

DeckShowcase

AgendaShowcase

StatBox

ExpandableSection

Frontmatter Reference

Article Layout

Featured Guides

Order

Thumbnail

Date

Guide Categories

Disable Custom Layouts

Complete Example