--- id: hypercardbook title: HyperCardBook オープンソースプロジェクト sub_title: インタラクティブBookプラットフォーム cover_image: https://images.unsplash.com/photo-1542831371-29b0f74f9713?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D play_mode: card theme_color: blue is_public: true published_at: 2026-06-22T01:41:32.415Z ---

🔓 MIT Licensed • 📝 Markdown First • 🌐 Open Source

HyperCard
Book

Interactive books, cards, and websites
from Markdown.

Write once. Publish interactive books in 80 languages.
A Markdown-first open-source platform for books, cards, presentations, and AI-ready content experiences.

★ GitHub Repository ▶ Live Showcase ✉ Contact Form 📞 Free Call / Try PapeRobo

my-hypercard.md — HyperCardBook

# The whole website is one .md file

# My HyperCard

Write your content in **Markdown**.
Lists, tables, images — all native.

<div class="hero-section">
  HTML when Markdown isn't enough
</div>

<style>
.hero-section {
  background: linear-gradient(...);
}
</style>

<script>
document.querySelector('.hero-section')
  .addEventListener('click', () => {
    alert('Front-end JS works!') })
</script>

What is HyperCardBook?

HyperCardBook is an open-source, Markdown-first platform for creating interactive books, web pages, presentations, learning materials, and knowledge bases — all from a single Markdown file.

The philosophy is simple: Markdown is the document. HTML, CSS, and JavaScript are extensions.

You write in Markdown. You enhance with HTML when layout demands it. You style with CSS. You add interactivity with vanilla JavaScript. The result is a fully interactive static experience — no server, no build step, no framework required.

Layer	Role	When to use
Markdown	Main content and structure	Everything you write
HTML	Advanced layout	Grids, iframes, buttons
CSS	Visual design	Colors, typography, effects
JavaScript	Local front-end interaction	Tabs, accordions, counters

What can you create?

Interactive books that visitors read page by page
HyperCard web pages — full websites in a single Markdown file
Stacks — curated bookshelves of books and cards
Presentations and slide decks
Learning materials with embedded video and quizzes
Product guides and documentation
Portfolios and personal sites
Knowledge bases for teams and communities

"This page itself is a HyperCard-style website — built in one Markdown file with embedded HTML, CSS, and JavaScript."

★ Live Showcase

See It in Action

"The best way to understand HyperCardBook is not to read about it. It is to touch it." — Try the live examples below, each running inside this very page.

HyperBook Sample

Getting Started with HyperCardBook

This HyperBook introduces HyperCardBook itself. Experience the page-turning book interface, large readable cards, images, videos, and onboarding content — all built from Markdown.

HyperBook Sample

PapeRobo Introduction

This HyperBook introduces PapeRobo — the phone-style AI character platform. It shows how a HyperBook can explain another product through interactive, scrollable pages built from Markdown.

HyperCard Sample

Markdown + HTML + CSS + JavaScript

This HyperCard demonstrates how a single Markdown document becomes a rich, interactive web page. HyperCard is the website-building side of HyperCardBook — the same format powering this very page.

PapeRobo Sample

Phone-Style AI Character

PapeRobo is a phone-style AI character experience within the MarkdownAI ecosystem. Not the main subject of this project, but a glimpse at where the HyperRobo integration is headed.

📝 Philosophy

Why Markdown First?

Markdown is more than a text format. It is the most durable, portable, AI-native content language ever created. Here is why we chose it as the foundation.

👁

Human-readable

A Markdown file reads naturally even without rendering. Any person, any tool, any era can open and understand it.

✏️

Instantly editable

No proprietary editor. No special software. Any text editor works. Authors stay focused on content, not tooling.

🤖

AI-native

LLMs write, edit, and reason about Markdown fluently. HyperCardBook is already aligned with the way AI creates content.

🔀

Git-friendly

Plain text diffs cleanly. Version control, branching, pull requests — all the developer workflows apply to your content.

⏳

Durable

Markdown files written in 2010 are still readable today. Your content will outlive any CMS, platform, or proprietary format.

🌐

Universal

Markdown is the lingua franca of technical writing, documentation, READMEs, blogs, notes, and now interactive books.

🔌

Extensible

Embed HTML exactly where needed. Add a style block. Drop in a script. Markdown stays readable; HTML adds power precisely where required.

📦

Self-contained

One file. No build system. No dependencies. No node_modules. The whole document ships as a single, portable, shareable unit.

How HyperCardBook Compares

Traditional Site Builders

Drag-and-drop GUIs
Vendor lock-in
Hard to version-control
Not AI-friendly
No Markdown

Documentation Generators

Markdown-based but book-only
No interactivity
Requires build pipeline
Multi-file only
No website output

Slide Tools

Presentation-only format
No book mode
Limited HTML extension
Vendor-specific formats
Poor for long content

⬛ HyperCardBook ✓

Markdown-first, always
Books and websites
One file, no build step
Full HTML/CSS/JS support
80-language publishing

📖 HyperBook

HyperBook — Interactive Reading Experiences

A HyperBook is an interactive, page-turning book experience built entirely from Markdown. It handles the layout, navigation, and reading UX — you just write.

What HyperBook delivers

Page-turning navigation — tap, swipe, or click
Mobile-first reading with large, comfortable typography
Full Markdown content on every page
Image and video embedding on any page
YouTube Shorts and YouTube video support
Google Maps embedding
Google Sheets embedding
Public bookshelf listing
80-language auto-translation publishing
Swipe navigation on touch devices
Responsive layout for all screen sizes

Who uses HyperBook?

Educators building digital textbooks and lesson sets
Authors publishing picture books, photo books, and stories
Companies creating product guides and onboarding materials
Creators building workshop materials and community showcases
AI tools generating educational books automatically
Language learners and children's learning apps

🃏 HyperCard

HyperCard — Websites in One Markdown File

A HyperCard is a single Markdown document that becomes a full, rich, interactive web page. It is the website-building side of HyperCardBook — and this page is one.

A HyperCard source looks like this:

# My HyperCard

Markdown content here — paragraphs, lists,
tables, images, code blocks.

<div class="special-section">
  HTML only when Markdown is insufficient.
</div>

<style>
.special-section {
  background: linear-gradient(...);
}
</style>

<script>
// Front-end interaction with vanilla JS
document.querySelector('.special-section')
  .addEventListener('click', handleClick);
</script>

Use cases

Landing pages and product pages
Interactive documentation and guides
Portfolios and personal sites
Dashboards and data displays
Web apps and mini-tools
Static websites with full interactivity
Manuals and knowledge bases

This page itself is a HyperCard — one .md file containing all the Markdown, HTML, CSS, and JavaScript you see here.

📚 Stack

Stack — Your Curated Bookshelf

A Stack is a bookshelf-style collection of HyperBooks and HyperCards. Organize your content, curate a portfolio, or build a public knowledge base.

🏢

Product Documentation

Keep every guide, manual, and API reference in one Stack — organized, searchable, and always up to date.

🎓

Course Materials

Arrange lessons, exercises, and supplementary reading into a structured learning Stack that students can explore at their own pace.

🧠

Corporate Knowledge Base

Centralize company documentation, policies, playbooks, and internal guides into a single, version-controlled Stack.

🎨

Creator Portfolio

Showcase your work — books, articles, case studies, and interactive demos — in a polished public-facing Stack.

🌐

Public Sample Collection

Share open-source HyperBooks and HyperCards with the community through a publicly browsable Stack.

🛠

Workshop Materials

Distribute workshop slides, exercise files, and reference cards as a Stack that participants can revisit any time.

The HyperCardBook Content Hierarchy

Level	What it is	Contains
Stack	Bookshelf / collection	Multiple Books and Cards
HyperBook	Interactive book	Multiple cards / pages
HyperCard	Single-page web experience	Markdown + HTML/CSS/JS

🗺 Architecture

The MarkdownAI Ecosystem

HyperCardBook is the open-source core of a broader ecosystem. Here is how the pieces relate.

MarkdownAI Ecosystem
"Markdown is all you need"

↓

⬛ HyperCardBook
Open Source · MIT License

↓

📖 HyperBook
Interactive Books

🃏 HyperCard
Web Pages

📚 Stack
Bookshelves

↓

🤖 HyperRobo
Combined Experience

📞 PapeRobo
AI Character (proprietary)

✓ HyperCardBook

Open source, MIT licensed. The platform anyone can build on, fork, and extend.

⊘ PapeRobo

Proprietary product. Phone-style AI character platform in the MarkdownAI ecosystem.

⟳ HyperRobo

Combined experience: HyperCardBook content + PapeRobo AI characters in one integrated surface.

◎ MarkdownAI

The broader ecosystem. Started as an AI Markdown editor in 2024; HyperCardBook is now its open-source core.

✨ Features

Everything You Need

24 capabilities that make HyperCardBook the most versatile Markdown-first publishing platform available.

📝

Markdown-First Authoring

Write everything in standard Markdown. Headings, lists, tables, links, images — all native and readable without rendering.

📖

Interactive HyperBooks

Page-turning book interface with swipe navigation. Read like a real book — on desktop, tablet, or phone.

🃏

HyperCard Web Pages

Build full websites in a single Markdown file. HTML, CSS, and JavaScript extend Markdown exactly where needed.

📚

Stack Bookshelf

Organize Books and Cards into curated, browsable collections. Build course materials, documentation sites, and portfolios.

🌐

80-Language Publishing

Publish your content in 80 languages automatically. Write once, reach global audiences with a single click.

📱

Mobile-First Reading

Every HyperBook and HyperCard is designed for mobile from the ground up. Reads beautifully on any screen.

👆

Swipe Navigation

Touch-native HyperBook navigation. Readers swipe left and right to turn pages, just like a real book.

🖼

Image Embedding

Embed images with standard Markdown syntax. No special tags, no uploads dashboard — just `![alt](url)`.

🎬

Video Embedding

Embed any video — YouTube, Vimeo, or direct — into any Book page or Card section with a simple iframe.

📲

YouTube Shorts Support

Embed YouTube Shorts in vertical format. Perfect for modern, mobile-first content experiences.

🗺

Google Maps Support

Embed any Google Maps view — street maps, street view, directions, or custom maps — directly in your content.

📊

Google Sheets Support

Embed live Google Sheets for dynamic data tables, charts, and spreadsheets right inside your Book or Card.

📤

HTML Export

Your content is already HTML-ready. Export, embed, or share as a standalone static page with no extra tooling.

🎨

CSS Customization

Full CSS control inside HyperCards. CSS variables, media queries, gradients, animations — all supported.

⚙️

Front-End JavaScript

Add interactivity with vanilla JavaScript. Tabs, accordions, counters, form previews — no framework required.

📬

Public Bookshelf

List your HyperBooks on the public HyperCardBook bookshelf. Reach readers who discover new content to explore.

🔀

GitHub-Friendly Source

Plain Markdown files diff cleanly in Git. Version control, review, and collaborate on your content like code.

🤖

AI-Assisted Creation

LLMs write Markdown natively. Generate, edit, and expand your HyperBooks and HyperCards with any AI assistant.

📞

PapeRobo Ecosystem

Connect your content to PapeRobo AI characters. Let readers interact with your HyperBook through a phone-style AI.

🔮

HyperRobo Experience

The combined future: HyperCardBook content + AI characters in one seamlessly integrated reading and conversation experience.

📕

ePub Potential

Markdown-first source makes ePub export a natural next step. Your content is already structured for multi-format publishing.

🎓

Education Use Cases

Built for teachers, trainers, and learning designers. Create textbooks, lesson sets, and interactive learning materials.

🖥

Presentation Use Cases

Turn your Markdown into a slide-style presentation. Each page becomes a screen, each Card becomes a deck.

🚀

Creator Publishing

Publish your work to a global audience with zero infrastructure. One Markdown file, infinite readers.

🛝 Interactive Playground

Front-End Interactivity — Live Demo

Everything below runs in your browser — no server, no backend, no external library. Just Markdown + vanilla JavaScript, the HyperCard way.

📝 Markdown — The Foundation

Markdown handles everything you read as text. Paragraphs, headings, lists, tables, code blocks, links, and images all live in Markdown. It is the source of truth for your content.

Standard CommonMark syntax
Human-readable without rendering
AI tools write it natively
Git diffs cleanly
Supports GFM tables and task lists

🔧 HTML — Layout Enhancement

HTML is used only where Markdown cannot reach: responsive grids, iframe containers, buttons, custom components, and architecture diagrams. The rule: if Markdown can do it, use Markdown.

Inline HTML is valid Markdown
Used for grids, iframes, buttons
Never wraps the whole document
Minimal: only where layout demands it
No <html><head><body> tags

🎨 CSS — Visual Design

All CSS lives in one <style> block. Modern CSS — variables, gradients, grid, flexbox, glassmorphism, transitions — makes the experience polished without any external library.

CSS custom properties (variables)
Media queries for responsiveness
No Bootstrap, no Tailwind CDN
Glassmorphism and gradients
Dark/light mode via class switching

⚡ JavaScript — Local Interaction

All JavaScript lives in one <script> block. Vanilla JS only. No React, no Vue, no external bundles. Tabs, accordions, counters, form previews — everything runs locally in the browser.

Vanilla JavaScript only
No API calls, no backend
No external libraries or CDN
Browser-local state only
Works offline after first load

🔢 Live Counters

Languages

Markdown File

✓

Backend Needed

MIT

License

📋 Demo Form Preview

❓ FAQ Preview

HyperCardBook is an open-source, Markdown-first platform for creating interactive books, web pages, presentations, and knowledge bases — all from a single .md file.

No. This is the HyperCardBook open-source project website. MarkdownAI is the broader ecosystem; HyperCardBook is its open-source core. They are related but distinct.

For HyperBooks, no. Standard Markdown is enough. For HyperCards with custom styling and interaction, basic HTML/CSS/JS knowledge is helpful but not required to get started.

Yes — vanilla JavaScript only. You can add tabs, accordions, counters, animations, form validation, and any browser-local interaction. External libraries and API calls are not supported.

Yes. HyperCardBook supports publishing in 80 languages. Write your content once in your primary language and publish globally with automatic translation support.

🖼 Gallery

A World of Content

HyperCardBook is for books, knowledge, education, technology, and creative publishing — across every topic, language, and audience.

Books & Reading

Library

Coding

Education

Mobile Reading

AI & Technology

Creative Writing

Smartphone

Knowledge

Creative Workspace

Learning

Dashboards

Presentations

Open Source

80 Languages

Publishing

📅 Timeline

The Journey

From AI Markdown editor to the most versatile open-source content platform.

2024

MarkdownAI Beta Launched

MarkdownAI launched as an AI-powered editor specializing in Markdown — making it easy for anyone to write, edit, and publish structured content with AI assistance.

July 2026

HyperCardBook Becomes the Core

HyperCardBook is born as the new interactive publishing core of MarkdownAI. HyperBook, HyperCard, and Stack define the content model. The vision: write once, publish everywhere.

2026

Open-Source Release

HyperCardBook opens as a community project under the MIT License. GitHub repository launches. Community contributions, sample Books, sample Cards, and localizations are welcomed.

Future

HyperRobo, PapeRobo, Premium Services

HyperRobo integrates HyperCardBook content with PapeRobo AI characters. Premium MarkdownAI services expand on the open-source foundation. ePub export, advanced Stack features, and more.

🔓 Open Source

Built for the Community

HyperCardBook is MIT licensed and open to everyone. Use it, fork it, build on it, and help shape its future.

How to Contribute

★ Star the GitHub repository to show support
📖 Contribute sample HyperBooks for the community bookshelf
🃏 Share sample HyperCards showing creative use cases
📝 Improve documentation and write guides
🌐 Help localize content into other languages
🐛 Report bugs and test edge cases
💡 Suggest features and use cases in GitHub Discussions
🤝 Partner with us — educational, publishing, or AI projects welcome

★ Star on GitHub 📂 Explore Repository ✉ Contribute Samples 📞 Contact Project

🔓 MIT License

Use HyperCardBook freely in personal and commercial projects. No royalties, no restrictions. Build products on top of it. Fork it. Sell it. The only requirement: keep the license notice.

📦 GitHub Repository

All source code, sample content, and documentation lives on GitHub. Issues, discussions, and pull requests are open to the community.

github.com/kouichinagata/hypercardbook

✉ Contact

Let's Build the Future of
Interactive Publishing

Whether you are building with HyperCardBook, contributing to the open-source project, exploring a partnership, or simply curious — we would love to hear from you.

✉ Contact Us 🛠 Contribute 🤝 Partnership 💬 Feedback

Or try a free live conversation via PapeRobo — 📞 Start Free Call

❓ FAQ

Frequently Asked Questions

HyperCardBook is an open-source, Markdown-first platform for creating interactive books (HyperBook), rich web pages (HyperCard), and curated content collections (Stack). One Markdown file becomes an interactive experience — with optional HTML, CSS, and vanilla JavaScript for advanced layout and interactivity.

Yes. HyperCardBook is open source under the MIT License. You can use it freely in personal and commercial projects, fork it, modify it, and build products on top of it. The GitHub repository is open for contributions, issues, and discussions.

No. This is the HyperCardBook open-source project website. MarkdownAI is the broader ecosystem that HyperCardBook is part of, but this site is specifically about the open-source HyperCardBook project — its tools, community, and mission.

A HyperBook is an interactive, page-turning book experience built from Markdown. It handles the layout, swipe navigation, and reading UX automatically. You write Markdown pages; HyperBook presents them as a beautiful, mobile-first book. It supports images, video, YouTube Shorts, Google Maps, and Google Sheets embedding.

A HyperCard is a single Markdown document that becomes a full, rich, interactive web page. It supports Markdown for content, HTML for advanced layout, CSS for design, and vanilla JavaScript for front-end interaction — all in one file. This website is itself a HyperCard.

A Stack is a bookshelf-style collection of HyperBooks and HyperCards. It lets you organize content into structured sets — courses, documentation sites, portfolios, product guides, or public sample galleries. Stacks are browsable and can be made public.

Yes — that is exactly what HyperCard is designed for. A single Markdown file with embedded HTML, CSS, and JavaScript becomes a full website. This page is the best proof: a complete, polished, multi-section website in one .md file.

For HyperBooks: no programming required. Write standard Markdown and HyperCardBook handles the rest. For HyperCards with custom design and interactivity: basic HTML, CSS, and JavaScript knowledge is helpful. Most creative effects can be achieved by copying and adapting patterns from examples.

Yes. Vanilla JavaScript is fully supported in HyperCards. You can add tabs, accordions, counters, form previews, animations, theme toggles, and any browser-local interaction. External libraries, API calls, and server-side code are not supported — everything must run locally in the browser.

Yes. HyperCardBook supports publishing in 80 languages. Write your content in your primary language and HyperCardBook can publish it to global audiences with translation support. This makes it ideal for educational content, product documentation, and creator publishing that needs to reach a diverse audience.

No. PapeRobo is a proprietary product in the MarkdownAI ecosystem. It is a phone-style AI character platform. HyperCardBook is the open-source core; PapeRobo and HyperRobo are proprietary products that build on top of it.

HyperRobo is a combined experience integrating HyperCardBook content with PapeRobo AI characters. It represents the future direction of the MarkdownAI ecosystem — where readers can interact with your HyperBook content through a phone-style AI character. HyperRobo is in development.

Star the GitHub repository, submit sample HyperBooks or HyperCards, improve documentation, help with localization, report bugs, or reach out about partnership. All contribution types are welcome — code, content, testing, and translation. Use the GitHub repository or the contact form on this page.

The HyperCardBook GitHub repository is at github.com/kouichinagata/hypercardbook. Issues, discussions, and pull requests are open. Star it to stay updated.

HyperCardBook