@app-studio/components

Markdown

`Markdown` affiche un document sur le web et React Native avec les primitives App Studio. Il partage le moteur de rendu de `BlockEditor`, sans ajouter de dépendance ni de surface d'édition.

View component source

Import

import { Markdown } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

import React, { useState } from 'react';
import { Markdown } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Vertical } from 'app-studio';

export function MarkdownExample() {
  const [expanded, setExpanded] = useState(false);
  return (
    <Vertical gap={16}>
      <Button variant="outline" onClick={() => setExpanded(!expanded)}>
        Toggle content
      </Button>
      <Markdown
        value={
          expanded
            ? '## Ready to build\n\nUse **components**, `tokens`, and your own state.\n\n- Install\n- Compose\n- Ship'
            : 'A **small** Markdown preview.'
        }
      />
    </Vertical>
  );
}

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

Markdown
Prop	Type	Default	Description
`value` Required	`string`	`—`	Current controlled value. Update it from the matching change callback.Source
`label`	`string`	`—`	Visible label describing this control.Source
`onLinkPress`	`((url: string) => void)`	`—`	Override link navigation, for example to use the application's native router.Source
`renderLink`	`((url: string, children: ReactNode) => ReactNode \| undefined)`	`—`	Return undefined to keep the safe default, or replace a link with application content.Source
`allowImages`	`boolean`	`—`	Disable external image loading while retaining readable alternative text.Source
`allowVideos`	`boolean`	`—`	Disable video loading and navigation while retaining its caption.Source
`renderVideo`	`((url: string, caption: string) => ReactNode \| undefined)`	`—`	Optional application player, especially on native. Called only for safe, allowed URLs.Source
`labels`	`{ sourceFallback?: string; }`	`—`	See the type and source declaration for this property.Source
`views`	`{ container?: ViewProps; block?: ViewProps; source?: ViewProps; notice?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source
`typing`	`boolean \| { charsPerTick?: number; intervalMs?: number; }`	`—`	See the type and source declaration for this property.Source
`isStreaming`	`boolean`	`—`	Keep the cursor active while waiting for more content; completion waits for false.Source
`onTypingComplete`	`(() => void)`	`—`	See the type and source declaration for this property.Source

Common inherited styling props (7)

Scroll horizontally to see every column.

Markdown inherited
Prop	Type	Default	Description
`onClick`	`any`	`—`	Called when the user activates the component.
`media`	`Record<string, CssProps>`	`—`	See the type and source declaration for this property.
`as`	`keyof JSX.IntrinsicElements` `"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"`	`—`	See the type and source declaration for this property.
`themeMode`	`"light" \| "dark"` `"light""dark"`	`—`	See the type and source declaration for this property.
`_hover`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_active`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_focus`	`string \| CssProps`	`—`	See the type and source declaration for this property.

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
These previews run in the browser. Check React Native setup for platform requirements and differences.