DEV Community

Yohei Seki
Yohei Seki

Posted on

Cattaz: Wiki collaboration tool with markdown and applications

We developed "Cattaz", collaborate freely and openly with markdown and applications.

Cattaz is OSS (Open Source Software).


GitHub - Cattaz

It is an evolved Wiki that can launch, organize, accumulate and share knowledge freely using applications tailored to the activities of teams from Markdown.


Edit Markdown

CommonMark, standardization of Markdown, can be used for desrciption.

With Markdown, keep the text in an easily formatted state.

Copy & paste text as it is without requiring conversion between Cattaz and other Markdown editors.

As you edit the text, you can see the preview in real time.

Run Applications and bidirectional editing

Launch the application on the preview screen by specifying the application name in fenced code block (block starting with 3 backticks).

Markdown makes it easy to enter complex information from the application's UI.

Also, depending on the UI of the application, display the information in user friendly form.

Placing multiple applications on one page, information entered in the application can be immediately reflected in the editor and can be saved as one page.

Keeping everything on a single page in Cattaz, teams can co-create activities smoothly.

Cattaz: Run Applications

Easily Develop Applications

Engineers can develop and implement applications that run on the preview screen in the same way as creating web applications.

Write the application using JavaScript and React library.

By processing the specified propTypes, you can realize an application with synchronization function added.

Check the developer's guide for "Hello world" application to start developing your own application.

Real-time Simultaneous Editing

Markdown texts and applications can be collaboratively edited simultaneously by multiple people in real time, so you can efficiently share and co-create information.

Cattaz is a also powerful tool when collaborating with people who are at remote locations such as remote conferences.

How it works

An example of the process when launching the application on the preview from Markdown is as follows.

  1. Convert Markdown to MDAST (Markdown Abstract Syntax Tree)
  2. Convert MDAST to HAST (Hypertext Abstract Syntax Tree)
  3. Convert HAST to HAST for application (Custom HAST), convert it to React Element, draw it in preview
    • Basically, HTML elements are converted to React elements without modification
    • In case of fenced code block, switch to React component of application corresponding to language specification
    • In case of fenced code block of unspecified language specification, leave as "pre" and "code" of HTML

Cattaz: Conversion processing

Use Case

  • Meeting
    • Minutes
    • Remote conference
  • Agile Development
    • Sprint's plan
    • Review
      • Kanban App
      • KPT App
  • Event
    • Hackathon
    • Ideathon


At first, we thought how a platform would be for the engineers to be lively and freely and openly active.

With advent of many tools, various working styles, the way to master these tools and how to share information is becoming complicated.

Although freedom is increased, but it is getting more confusing.

So, we have developed "Cattaz" to share everything at one place and to maximize the capabilities of engineers and enable them to have fun activities.

In addition, we aim to make Cattaz a free and vigorous place for people of various occupations, with diverse cultures, not just limited to engineers.

Top comments (2)

cotcotcoder profile image

Awesome ! ๐Ÿ˜

yoheiseki profile image
Yohei Seki

Thank you ! ๐Ÿ˜