Content-UI

⚗ experimental content viewer & editor

🕹️ codesandbox | stackblitz | source in apps/sandbox

Packages

• @content-ui/md
  • markdown to AST, using unifiedjs / remarkjs for parsing
• @content-ui/react
  • ReactJS hooks and providers for the other react packages
• @content-ui/md-mui
  • MUI leafs for content-leafs
• @content-ui/input
  • MUI styled code / text input field based on CodeMirror with preview and linting
• @content-ui/struct
  • structural helper utils and mdast typing extensions

npm i -S @content-ui/md @content-ui/react @content-ui/struct @content-ui/md-mui
# peer-dependencies:
npm i -S @mui/material @mui/icons-material
npm i -D @types/mdast

# input component with CodeMirror:
npm i -S @content-ui/md @content-ui/react @content-ui/struct @content-ui/md-mui @content-ui/input
# peer-dependencies:
npm i -S react-progress-state @ui-controls/progress @ui-schema/kit-codemirror @codemirror/state

all packages are ESM-only, those with the ESM flag support strict-ESM for browser + Node.js

See CustomCodeMirror.tsx for an example CodeMirror component, for viewer and input, with nested syntax highlighting and quite some other things.

See WidgetMarkdownEditor.tsx for an example UI-Schema widget with Markdown editor, linting and preview.

Development

Clone repository, then install all dependencies:

npm i

Start development servers from root folder:

npm run dev

Now open the app at localhost:4221 or the server at localhost:4222.

---

Only start the simplified sandbox:

npm run start -w content-ui-sandbox

And open the app at localhost:5173.

---

Lint, build typings + JS:

npm run build

Create new lock-file for sandbox/server requires setting workspaces to false.

# updating lock file requires already published packages
# first release, then update lock, then push again
cd apps/sandbox && npm i --package-lock-only --workspaces false

License

This project is distributed as free software under the MIT License, see License.