File editor

Inspect file content with a shared header and view controls.

guide.md

Getting started

Compose your interface with Stack UI.

View code

import { FileEditor } from "@stack/ui/file-editor";

export default function Example() {
  return (
    <FileEditor.Root
      reference={{ path: "guide.md" }}
      data={{
        kind: "text",
        content: "# Getting started\n\nCompose your interface with Stack UI.",
      }}
    >
      <FileEditor.Header>
        <FileEditor.Title />
        <FileEditor.ViewControls />
        <FileEditor.Actions />
      </FileEditor.Header>
      <FileEditor.Content />
    </FileEditor.Root>
  );
}

Usage

import { FileEditor } from "@stack/ui/file-editor";

Supply file data from your application. Despite its name, this component is a file inspection surface; this example does not write files.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

FileEditor.Root

Also accepts native element props.

Prop	Type	Required	Description
`className`	`string`	No	Additional CSS classes for the underlying element.
`children`	`ReactNode`	No	Content rendered inside the component.
`data`	`FilePreviewData`	No	Loaded text or media preview data.
`reference`	`FileLocation`	Yes	File path and optional source location.
`diff`	`Diff`	No	Diff data for the changes view.
`view`	`"source" \| "rendered" \| "diff"`	No	Current controlled file view.
`defaultView`	`"source" \| "rendered" \| "diff"`	No	Initial uncontrolled file view.
`fontSize`	`"small" \| "medium" \| "large"`	No	Source-view font size. Default: `"small"`.
`wrap`	`boolean`	No	Wrap long source lines. Default: `true`.
`onViewChange`	`((view: View) => void)`	No	Handle a file-view change.
`onOpenFile`	`((reference: FileLocation) => void)`	No	Open a referenced file.
`foldState`	`FileEditorFoldState \| null`	No	Controlled collapsed source regions.
`onFoldStateChange`	`((value: FileEditorFoldState) => void)`	No	Save changes to collapsed source regions.
`initialScrollTop`	`number`	No	Initial source scroll offset in pixels.
`onScrollTop`	`((value: number) => void)`	No	Save the source scroll offset.

FileEditor.Header

Also accepts native element props.

Prop	Type	Required	Description
`children`	`ReactNode`	No	Content rendered inside the component.
`size`	`"default" \| "sm"`	No	Size variant.

FileEditor.Title

Also accepts native element props.

Prop	Type	Required	Description
`children`	`ReactNode`	No	Content rendered inside the component.
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>`	No	Replace the underlying element using render composition.

FileEditor.ViewControls

This component takes no props.

FileEditor.Actions

Also accepts native element props.

Prop	Type	Required	Description
`children`	`ReactNode`	No	Content rendered inside the component.

FileEditor.Content

Prop	Type	Required	Description
`markdownProps`	`Omit<MarkdownProps, "children">`	No	Props forwarded to the Markdown renderer.
`className`	`string`	No	Additional CSS classes for the underlying element.