Beautiful Markdown renderer for React, meticulously crafted for CJK (Chinese, Japanese, Korean) typography and readability.
Most markdown renderers focus on functionality. Takumi focuses on the reading experience. We optimize line heights, letter spacing, and font choices to create documents that feel professional and polished by default.
- 🎨 Premium Typography - Optimized specifically for Japanese text (C-spacing, P-alt)
- 📝 Ruby Support - Render
｜text《ruby》syntax beautifully (web novel style) - 📋 Rich Frontmatter - Clean metadata display
- ✨ Modern Standards - GFM support, syntax highlighting, and responsive tables
Left: Default rendering (standard typography, raw syntax)
Right: Takumi rendering (optimized spacing, rendered rubies, premium feel)
npm install takumi-markdownimport { MarkdownRenderer } from 'takumi-markdown';
import 'takumi-markdown/styles.css';
function App() {
const markdown = `
# The Art of Text
Words should be beautiful.
｜Typography《タイポグラフィ》 matters.
`;
return <MarkdownRenderer content={markdown} />;
}Takumi is SSR-safe as long as you load the CSS globally (Next.js requires global CSS to be imported in its root files).
App Router
// app/layout.tsx
import 'takumi-markdown/styles.css';
export default function RootLayout({ children }) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}Pages Router
// pages/_app.tsx
import 'takumi-markdown/styles.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}Supports the standard Japanese web novel format:
| Syntax | Description | Result |
|---|---|---|
｜text《ruby》 |
Explicit | text with ruby above |
漢字《かんじ》 |
Auto-detect | 漢字 with かんじ above |
| Prop | Type | Description |
|---|---|---|
content |
string |
Markdown content to render |
Remark plugin for ruby notation. Exported for advanced users who want to use it with their own react-markdown setup.
import remarkRuby from 'takumi-markdown/remarkRuby';MIT