Skip to content

astro

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

astro

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
public
public
 
 
src
src
 
 
README.md
README.md
 
 
astro.config.mjs
astro.config.mjs
 
 
package.json
package.json
 
 
tailwind.config.js
tailwind.config.js
 
 
tsconfig.json
tsconfig.json
 
 
vercel.json
vercel.json
 
 

README.md

Astro example

@eigenpal/docx-editor-react as an Astro island. Astro ships zero JS by default. The editor is interactive and browser-only, so it loads with the client:only directive, which skips SSR for that component entirely.

Run it

This example resolves the @eigenpal/* packages from their built output, so build the workspace packages once first. From the repo root:

bun install
bun run build:packages
bun run dev:astro      # http://localhost:4321

Or from this directory: bun run dev.

The island

src/pages/index.astro renders the React editor as a client-only island:

---
import { Editor } from '../components/Editor';
---
<Editor client:only="react" />

client:only="react" is the key: client:load would still server-render the component first and crash on window. client:only renders it in the browser only. The page shell, fonts, and styles are still static HTML.

Files

File What it does
src/pages/index.astro Page shell + the client:only island
src/components/Editor.tsx React <DocxEditor /> component
astro.config.mjs @astrojs/react integration + Tailwind

Use it in your own Astro app

npm install @eigenpal/docx-editor-react @eigenpal/docx-editor-core
npx astro add react

Always mount the editor with client:only="react". Load the Material Symbols font in the page <head>:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block"
/>

Docs: https://www.docx-editor.dev/docs/1.x/react