Fudoki: A Free Web Tool That Makes Japanese Text Analysis & Speech Synthesis Visual

The Fudoki interface combines text analysis, speech synthesis, and a Markdown editor.

Have you ever struggled to visualize the structure of a Japanese sentence? Confronted by a stream of Hiragana, Katakana, and Kanji, how can you quickly grasp its grammatical flow, word readings, and hear its proper pronunciation? 「Fudoki」 is a free, browser-based tool designed to solve these exact problems. It “visualizes” Japanese by providing instant morphological analysis, part-of-speech tagging, and high-quality speech synthesis—all within a single, interactive web app for learners, creators, and developers.

What is Fudoki and What Problem Does It Solve?

「Fudoki is a client-side web application that runs entirely in your browser.」 No installations, no plugins. Its core mission is to help you 「see」 the inner workings of Japanese text and 「hear」 it spoken aloud. Whether you’re checking the grammar of your writing, dissecting a news article, or practicing pronunciation, Fudoki offers an intuitive environment for analysis and auditory feedback.

「How does it work?」 When you input Japanese text, Fudoki instantly processes it using the 「Kuromoji.js」 engine for 「morphological analysis」 (tokenization). This breaks the continuous text into meaningful words or tokens, tags each with its 「part-of-speech」 (noun, verb, adjective, etc.), and provides its 「reading」 in Kana and Romaji. This information is displayed using a color-highlighting system, making sentence structure clear at a glance.

Furthermore, using the browser’s native 「Web Speech API」, Fudoki can read the analyzed text aloud. You can choose from different synthetic voices, adjust the speech rate, and control playback down to the word or line level. This “see it, hear it” experience is central to Fudoki’s design.

「Who is it for?」

• 「Japanese Learners:」 Check composition, practice shadowing, look up word readings and definitions.
• 「Content Creators:」 Verify the fluency and pronunciation of Japanese blog posts or scripts.
• 「Developers & Technologists:」 Use as a lightweight demonstration or debugging tool for Japanese NLP tasks.
• 「Researchers & Translators:」 Quickly parse complex sentence structures to aid comprehension.

Core Features at a Glance

1. 「Intelligent Text Analysis:」 Real-time tokenization, part-of-speech tagging, Kana/Romaji readings.
2. 「Interactive Speech Synthesis:」 Word-by-word, line-by-line, or full-text playback with adjustable speed and voice.
3. 「Built-in Dictionary:」 Click any word to see definitions from the authoritative JMdict database.
4. 「Multi-Document Management:」 Create, auto-save, and quickly switch between multiple documents.
5. 「Modern Editor Experience:」 Integrated EasyMDE Markdown editor with live preview.
6. 「Responsive Design:」 Works well on desktops, tablets, and mobile devices.

Deep Dive: Core Technical Features and Practical Applications

Morphological Analysis and Visual Grammar

「The core question this section answers: How does Fudoki break down a Japanese sentence and use color to make its structure immediately understandable?」

Morphological analysis is the foundation of Japanese NLP. Fudoki uses the open-source 「Kuromoji.js」 library (Apache 2.0 License) to perform this complex task in real-time.

The secret to its “visualization” is a carefully designed 「color-coding system」. Each identified token is highlighted based on its part-of-speech, with reading information displayed above or below it.

「Practical Example:」 You are a beginner and write: “私は昨日、新しいレストランで美味しいパスタを食べました。” (I ate delicious pasta at a new restaurant yesterday.)
In Fudoki, this sentence is instantly decomposed and highlighted:

• “私” (I) and “レストラン” (restaurant) appear green (nouns).
• “食べました” (ate) appears blue (verb).
• “新しい” (new) and “美味しい” (delicious) appear orange (adjectives).
• “昨日” (yesterday) appears purple (adverb).
• “は”, “で”, “を” appear red (particles).

The colors let you instantly identify the sentence core (“私…パスタを食べました”) and its modifiers (“昨日”, “新しいレストランで”, “美味しい”). This visual feedback significantly reduces the cognitive load of parsing complex sentences.

「Developer Insight:」 The intuitiveness of the color scheme is critical. Fudoki’s choice offers good contrast and aligns with common language learning conventions (e.g., blue for verbs). This attention to detail directly impacts learning efficiency. Technically, seamlessly integrating the analysis engine into the front-end for real-time rendering is key to the tool’s fluid performance.

Customizable Speech Synthesis and Interactive Playback Control

「The core question this section answers: How flexible is Fudoki’s speech feature? Can I make it read just one word or change the speed mid-playback?」

Fudoki’s speech functionality goes far beyond simple “play” and “stop.” It leverages the widely-supported 「Web Speech API (Synthesis)」 to build a nuanced, interactive reading experience.

「Key Controls:」

1. 「Three Levels of Playback:」

   • 「Word-Level:」 Click any token card to hear that specific word pronounced in isolation. Perfect for drilling pronunciation.
   • 「Line-Level:」 A play button next to each line reads the entire line.
   • 「Full-Text:」 The main play button in the toolbar reads the entire document.
2. 「Dynamic Parameter Adjustment:」

   • 「Speech Rate:」 A slider allows smooth adjustment from 0.5x (very slow) to 2.0x (very fast). Beginners can slow it down to catch every syllable.
   • 「Voice Selection:」 Choose from different synthetic voices available in your browser/OS to hear different speaking styles.
3. 「Intelligent Playback Handling:」

   • The play button toggles to a “stop” icon during playback for clear status.
   • Dedicated 「Pause」 and 「Resume」 buttons allow precise control.
   • 「Instant-Apply Mechanism:」 A thoughtful design. If you change the speech rate or voice during playback, Fudoki 「automatically pauses」, then 「resumes near the current position with the new settings」. This prevents jarring breaks or misalignment, ensuring a smooth experience. All settings are persisted in your browser’s localStorage.

「Practical Example:」 You are practicing a Japanese speech. Listen to it once at normal speed. Find a tricky sentence, play just that line at 0.7x speed, and repeat. Then, focus on a specific particle whose pitch accent is difficult—click its red token card to have it pronounced ten times in a row. Your chosen speed and voice are remembered for your next session.

「Developer Insight:」 The worst thing a TTS tool can be is “dumb.” Fudoki hands fine-grained control to the user and optimizes the interaction flow with features like “instant-apply.” This reflects a deep understanding of the real learning process—iterative, micro-adjusting, and focused. The tool adapts to this process.

Integrated Markdown Editor: Where Text Analysis Meets Rich-Text Creation

「The core question this section answers: I write my Japanese blog in Markdown. Can Fudoki still analyze formatted text?」

「Absolutely.」 This is one of Fudoki’s most practical advanced features. Instead of a plain textarea, it integrates the full-featured 「EasyMDE」 Markdown editor. You can write in a modern editor with a toolbar (bold, italics, headers, lists, links, images), live preview, and full-screen mode—while 「retaining full compatibility with all Japanese analysis features.」

「How it works:」 When you edit text with Markdown syntax (e.g., **bold**, # heading), the editor renders the preview. Fudoki’s analysis engine works on the 「raw text content」, ignoring the Markdown markup. It analyzes and highlights only the Japanese text within. You see a beautifully formatted document where every Japanese word is still tagged and color-coded.

「Key Editor Features:」

• 「Dual-Pane View:」 Split-screen mode to edit Markdown on the left and preview the rendered result on the right.
• 「Syntax Highlighting:」 Markdown syntax is highlighted in the edit pane.
• 「Seamless Integration:」 Analysis, speech, and dictionary lookup work flawlessly within the Markdown writing flow.

「Practical Example:」 You are a tech blogger writing a Japanese tutorial on Python. You need code blocks, lists, and bold text. Write directly in Fudoki using Markdown for quick formatting. As you write, instantly check the reading and part-of-speech for a term like “変数” (variable) and hear it pronounced. Ensure linguistic accuracy while composing. Save drafts within Fudoki or copy the rendered HTML output.

「Developer Insight:」 Combining a professional tool (Markdown editor) with a domain-specific tool (Japanese analyzer) creates a synergistic effect. For developer/creator tools, it’s crucial to consider the actual workflow. Providing an integrated experience that doesn’t break the user’s “flow” is often more valuable than raw power in a single, isolated function.

Built-in Dictionary and Document Management

「The core question this section answers: What if I encounter an unknown word? How do I manage multiple documents I’m working on?」

「Built-in Dictionary (JMdict):」 Fudoki integrates data from the renowned 「JMdict」 Japanese dictionary project. After analysis, each word token becomes a clickable card. Click any card to instantly display its detailed definition, part-of-speech, and common translations in a panel. This eliminates the need to open a separate dictionary website or app, making the lookup action contextual and seamless.

「Multi-Document Management:」 Fudoki simulates a lightweight “document system” within your browser.

• Create 「multiple named documents」 (e.g., “Essay 1”, “News Summary”, “Vocabulary Notes”).
• All document content is 「auto-saved」 to your browser’s local storage.
• Use the document switcher dropdown at the top to 「quickly jump between documents」.

「Practical Example:」 You’re reading a Japanese tech article. Paste it into a Fudoki document named “Tech News” for analysis. Encounter the compound noun “人工知能” (artificial intelligence)? Click the green noun card to see its reading and English translation. Simultaneously, copy useful sentence patterns and new vocabulary into another document named “Vocab Builder” for future review.

「Developer Insight:」 A tool’s value lies in reducing context switches for the user. Looking up a word and saving content are traditionally separate actions requiring different tools. By integrating them into the core workflow, Fudoki increases its “stickiness” and utility, despite the added implementation complexity. This user-task-centric design approach is a key takeaway.

How to Get Started with Fudoki

Use Online (Easiest)

Access the official live version with all features, no setup required:
「https://fudoki.iamcheyan.com」

Local Deployment and Development

To run it on your local network or for development, Fudoki has a simple structure.

「Step 1: Obtain the Project Files」
You need the full Fudoki project directory, typically by cloning or downloading from its repository.

「Step 2: Understand the Project Structure」
Fudoki is a pure front-end project.

fudoki/
├── index.html          # Main entry point
├── static/             # All static assets
│   ├── main-js.js      # Core application logic
│   ├── segmenter.js    # Text analysis processor
│   ├── styles.css      # Stylesheet (theme colors via CSS variables)
│   └── libs/           # Third-party libraries
│       ├── kuromoji.js # Morphological analysis engine
│       └── dict/       # Dictionary data
│           ├── *.dat.gz        # Kuromoji dictionary files
│           └── jmdict_*.json   # JMdict data (JSON format)
└── README.md           # Documentation

「Step 3: Start a Local Server」
You cannot simply open index.html directly in a browser due to cross-origin restrictions blocking dictionary file loads. Use a simple local HTTP server.

The quickest method uses Python:

# In your terminal, navigate to the project root (the folder containing `index.html`) and run:
python -m http.server 8000

Then, open your browser to 「http://localhost:8000」.

「Step 4: Customization & Development」

• 「Modify Theme:」 All theme colors are defined via CSS custom variables (e.g., --color-primary) in static/styles.css. Change these values to adjust the palette.
• 「Update Dictionary:」 To update JMdict data, place new jmdict_*.json files into the static/libs/dict/ directory.

The Philosophy Behind the Name: Why “Fudoki”?

A good name conveys a product’s spirit. 「Fudoki (フドキ)」 pays homage to Japan’s ancient Nara-period geographical records called 「Fudoki」 (“風土記”).

“Fūdo” (風土) evokes the climate, culture, and unique texture of a specific place. “Ki” (記) means to record or chronicle.

This tool does precisely that: it 「“records the climate of language.”」 It decomposes sentences into words, tags them with the “topography” of part-of-speech and the “phonology” of readings, and then reassembles them for spoken output. This process is structurally analogous to the ancient work of meticulously documenting the features of a land and its people. Fudoki isn’t the historical text itself, but it inherits that ethos of “attentively observing and recording the world,” applying it to language learning to make invisible structures visible. The name adds a layer of cultural depth and thoughtful purpose to the technical tool.

Tech Stack, Licensing, and Contribution

「Core Technology:」

• 「Analysis Engine:」 Kuromoji.js (Apache License 2.0). The key library bringing robust Japanese morphological analysis to the browser.
• 「Speech Synthesis:」 Web Speech API. A standard modern browser interface, requiring no plugins.
• 「Dictionary Data:」 JMdict (Creative Commons Attribution-ShareAlike 3.0). A high-quality, free Japanese lexicon database.
• 「Editor:」 EasyMDE. A versatile, embeddable Markdown editor.

「Open Source License:」
The Fudoki application is released under the 「MIT License」. This is a permissive license allowing free use, modification, and distribution, including for commercial purposes.

「Contributing & Feedback:」
Fudoki is an open-source project. If you find a bug or have a feature request, you can submit feedback via the project’s GitHub Issues page. Developer contributions via Pull Requests for fixes or enhancements are warmly welcomed. The project repository link can typically be found in the tool’s footer or about section.

Practical Summary & Action Guide

Quick Start Guide

1. 「Go to:」 https://fudoki.iamcheyan.com.
2. 「Input:」 Paste or type Japanese text into the editor.
3. 「Analyze:」 Text is instantly tokenized and color-highlighted (nouns green, verbs blue, etc.).
4. 「Look Up:」 Click any colored word card to see its definition.
5. 「Listen:」

   • Click a 「word」: Hears that word.
   • Click a 「line’s play button」: Hears that line.
   • Click the 「main play button」: Hears the full text.
   • Use the 「top slider」 for speed, the 「dropdown」 for voice.
6. 「Edit:」 Use the toolbar for Markdown formatting (bold, lists, etc.).
7. 「Manage:」 Use the top “Document” dropdown to create, switch, or rename documents.

One-Page Summary

Frequently Asked Questions (FAQ)

「1. Is Fudoki free, and do I need to register?」
Yes, it is completely free and open-source. There is no registration or account required. You use it directly in your browser.

「2. Do I need to install any software or browser plugins?」
No. You only need a modern web browser (like the latest versions of Chrome, Edge, Firefox, or Safari). The speech function relies on the browser’s built-in Web Speech API support.

「3. Is my text data uploaded to a server?」
「No.」 All text analysis, speech synthesis, and document saving happens locally in your browser. The live version also processes everything client-side via JavaScript; your content is not sent to any external server.

「4. The synthetic voice sounds robotic. Can I change it?」
Yes. The list of available voices depends on your operating system and browser. Most systems provide several voice options (different genders, styles). You can try selecting different options from Fudoki’s voice dropdown menu.

「5. Can I use Fudoki on my phone?」
Yes. Fudoki uses responsive design. On small screens (phones), it automatically adjusts the layout (e.g., compresses controls, repositions buttons) to ensure core functionality is accessible.

「6. Will it lag if I analyze a very long text, like a full article?」
For extremely long texts, performing analysis and rendering for all tokens at once may cause a brief delay. For the best experience with long texts, consider analyzing and playing back in smaller sections or paragraphs.

「7. Can I use Fudoki offline?」
If you run it via local deployment (python -m http.server), it works fully offline. The online version requires an initial network load. After loading, core features may partially work offline (e.g., viewing analyzed content), but features like speech synthesis might require a network connection.

「8. How accurate is the text analysis?」
Fudoki relies on the Kuromoji.js engine, which has high accuracy for standard modern Japanese. For very new slang, highly domain-specific terms, or classical Japanese, analysis errors may occur. This is a common limitation of statistical NLP models.