diff --git a/content/docs/core/schema-renderer.mdx b/content/docs/core/schema-renderer.mdx
index a6142c324e..59129201aa 100644
--- a/content/docs/core/schema-renderer.mdx
+++ b/content/docs/core/schema-renderer.mdx
@@ -78,9 +78,10 @@ ComponentRegistry.register('my-widget', MyWidgetComponent);
```tsx
import { SchemaRenderer } from '@object-ui/react';
+import type { PageNodeSchema } from '@object-ui/types';
function App() {
- const schema = {
+ const schema: PageNodeSchema = {
type: 'page',
title: 'Dashboard',
body: [
diff --git a/content/docs/guide/quick-start.md b/content/docs/guide/quick-start.md
index c3242ed4ac..fcdfeef315 100644
--- a/content/docs/guide/quick-start.md
+++ b/content/docs/guide/quick-start.md
@@ -81,8 +81,9 @@ Replace `src/App.tsx` with:
import '@object-ui/components';
import '@object-ui/fields';
import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { CardSchema } from '@object-ui/types';
-const schema = {
+const schema: CardSchema = {
type: 'card',
title: 'Team Directory',
description: 'Rendered from JSON metadata',
diff --git a/content/docs/guide/schema-playground.md b/content/docs/guide/schema-playground.md
index 7cbaa7e59e..bfd109be55 100644
--- a/content/docs/guide/schema-playground.md
+++ b/content/docs/guide/schema-playground.md
@@ -263,9 +263,10 @@ In code, this is a single call:
```tsx
import { SchemaRenderer } from '@object-ui/react';
+import type { CardSchema } from '@object-ui/types';
// The schema object (from your editor, API, or file)
-const schema = {
+const schema: CardSchema = {
type: 'card',
title: 'Hello',
body: { type: 'text', content: 'World' },
diff --git a/content/docs/guide/schema-rendering.md b/content/docs/guide/schema-rendering.md
index cd8e202ab0..b3c8366377 100644
--- a/content/docs/guide/schema-rendering.md
+++ b/content/docs/guide/schema-rendering.md
@@ -21,6 +21,7 @@ The `SchemaRenderer` is the primary component that interprets your JSON schemas:
```tsx
import { SchemaRenderer } from '@object-ui/react'
import { initializeComponents } from '@object-ui/components'
+import type { PageNodeSchema } from '@object-ui/types'
// Side-effect import: loading the package runs its own field registration.
import '@object-ui/fields'
@@ -28,10 +29,10 @@ import '@object-ui/fields'
initializeComponents()
function App() {
- const schema = {
+ const schema: PageNodeSchema = {
type: "page",
title: "My Dashboard",
- body: { type: "text", content: "Hello" }
+ body: [{ type: "text", content: "Hello" }]
}
return
diff --git a/content/docs/plugins/plugin-charts.mdx b/content/docs/plugins/plugin-charts.mdx
index 093ea97352..fa6cdad98c 100644
--- a/content/docs/plugins/plugin-charts.mdx
+++ b/content/docs/plugins/plugin-charts.mdx
@@ -35,9 +35,10 @@ The plugin provides two chart APIs:
```tsx
// Import once in your app entry point
import '@object-ui/plugin-charts'
+import type { BarChartSchema } from '@object-ui/plugin-charts'
// Use in schemas
-const schema = {
+const schema: BarChartSchema = {
type: 'bar-chart',
data: [
{ name: 'Jan', value: 400 },
@@ -95,7 +96,9 @@ The plugin provides two different chart components:
For basic single-series bar charts, use the simplified `bar-chart` type:
```tsx
-const schema = {
+import type { BarChartSchema } from '@object-ui/plugin-charts'
+
+const schema: BarChartSchema = {
type: 'bar-chart',
data: [
{ month: 'Jan', sales: 400 },
@@ -116,7 +119,9 @@ For multi-series charts or line/area charts, use the advanced `chart` type with
##### Bar Chart
```tsx
-const schema = {
+import type { ChartSchema } from '@object-ui/types'
+
+const schema: ChartSchema = {
type: 'chart',
chartType: 'bar',
data: [
@@ -139,7 +144,9 @@ const schema = {
##### Line Chart
```tsx
-const schema = {
+import type { ChartSchema } from '@object-ui/types'
+
+const schema: ChartSchema = {
type: 'chart',
chartType: 'line',
data: [
@@ -160,7 +167,9 @@ const schema = {
###### Area Chart
```tsx
-const schema = {
+import type { ChartSchema } from '@object-ui/types'
+
+const schema: ChartSchema = {
type: 'chart',
chartType: 'area',
data: [
@@ -198,7 +207,9 @@ Each `series` entry names the column it plots (`dataKey`, or the spec spelling `
An `area` chart keeps every key in this example live: `stack` stacks the two primary areas, and the comparison overlay takes both the dash and the opacity (on a `bar` chart the dash would still reach the mark, but a bar has no stroke to dash). Neither key needs `variant: 'comparison'` — a primary series may carry them too, and then it is the overlay's defaults, not the keys, that stay comparison-only.
```tsx
-const schema = {
+import type { ChartSchema } from '@object-ui/types'
+
+const schema: ChartSchema = {
type: 'chart',
chartType: 'area',
data: [
diff --git a/content/docs/plugins/plugin-editor.mdx b/content/docs/plugins/plugin-editor.mdx
index c4d1681984..5cb59b077c 100644
--- a/content/docs/plugins/plugin-editor.mdx
+++ b/content/docs/plugins/plugin-editor.mdx
@@ -30,9 +30,10 @@ npm install @object-ui/plugin-editor
```tsx
// Import once in your app entry point
import '@object-ui/plugin-editor'
+import type { CodeEditorSchema } from '@object-ui/plugin-editor'
// Use in schemas
-const schema = {
+const schema: CodeEditorSchema = {
type: 'code-editor',
value: 'console.log("Hello, World!");',
language: 'javascript',
@@ -97,7 +98,9 @@ The Monaco Editor supports 100+ programming languages including:
### JavaScript Editor
```tsx
-const schema = {
+import type { CodeEditorSchema } from '@object-ui/plugin-editor'
+
+const schema: CodeEditorSchema = {
type: 'code-editor',
value: 'function hello() {\n console.log("Hello!");\n}',
language: 'javascript',
@@ -109,7 +112,9 @@ const schema = {
### Read-only Code Display
```tsx
-const schema = {
+import type { CodeEditorSchema } from '@object-ui/plugin-editor'
+
+const schema: CodeEditorSchema = {
type: 'code-editor',
value: 'const API_KEY = "secret";\n// Do not modify',
language: 'typescript',
@@ -121,7 +126,9 @@ const schema = {
### Python Editor
```tsx
-const schema = {
+import type { CodeEditorSchema } from '@object-ui/plugin-editor'
+
+const schema: CodeEditorSchema = {
type: 'code-editor',
value: 'def hello():\n print("Hello, World!")',
language: 'python',
diff --git a/content/docs/plugins/plugin-map.mdx b/content/docs/plugins/plugin-map.mdx
index 4482a0f31b..8f260024bb 100644
--- a/content/docs/plugins/plugin-map.mdx
+++ b/content/docs/plugins/plugin-map.mdx
@@ -70,7 +70,9 @@ const schema: ObjectMapSchema = {
### With Static Data
```tsx
-const schema = {
+import type { ObjectMapSchema } from '@object-ui/types'
+
+const schema: ObjectMapSchema = {
type: 'object-map',
staticData: [
{
diff --git a/content/docs/plugins/plugin-markdown.mdx b/content/docs/plugins/plugin-markdown.mdx
index 9e7dd0475e..94b2fca448 100644
--- a/content/docs/plugins/plugin-markdown.mdx
+++ b/content/docs/plugins/plugin-markdown.mdx
@@ -22,9 +22,10 @@ npm install @object-ui/plugin-markdown
```tsx
// Import once in your app entry point
import '@object-ui/plugin-markdown'
+import type { MarkdownSchema } from '@object-ui/plugin-markdown'
// Use in schemas
-const schema = {
+const schema: MarkdownSchema = {
type: 'markdown',
content: '# Hello World\n\nThis is **markdown** text with [links](https://example.com).'
}
@@ -333,7 +334,9 @@ await updateData('user-123', { name: 'John Doe' })
Use Tailwind Typography plugin for better markdown styling:
```tsx
-const schema = {
+import type { MarkdownSchema } from '@object-ui/plugin-markdown'
+
+const schema: MarkdownSchema = {
type: 'markdown',
content: '# My Document\n\nContent here...',
className: 'prose prose-lg prose-slate dark:prose-invert max-w-none'
@@ -354,7 +357,9 @@ All markdown content is automatically sanitized using `rehype-sanitize` to preve
```tsx
// Safe - HTML tags are sanitized
-const schema = {
+import type { MarkdownSchema } from '@object-ui/plugin-markdown'
+
+const schema: MarkdownSchema = {
type: 'markdown',
content: '**Safe** markdown with '
}
diff --git a/scripts/__tests__/check-doc-snippet-types.test.ts b/scripts/__tests__/check-doc-snippet-types.test.ts
index 2673ec0aa0..ec5646ff33 100644
--- a/scripts/__tests__/check-doc-snippet-types.test.ts
+++ b/scripts/__tests__/check-doc-snippet-types.test.ts
@@ -105,8 +105,10 @@ const FENCE = '```';
*/
const README_SAMPLE_DOC = 'content/docs/plugins/plugin-markdown.mdx';
// 195 until objectui#6972 replaced two prop-table rows above it with a
-// retirement blockquote (+11 lines); re-declared here, as this pin intends.
-const README_SAMPLE_FENCE_LINE = 206;
+// retirement blockquote (+11 lines); 206 until objectui#8125's annotation sweep
+// added one `import type` line to the page's first block (+1 line);
+// re-declared here each time, as this pin intends.
+const README_SAMPLE_FENCE_LINE = 207;
/**
* The regex reader objectui#7555 removed from both gates, kept HERE and only