🍊mikanBox Help v1.0

Concept & Features

🍊mikanBox is an "AI-era, parts-assembly, ultra-lightweight CMS." It is designed to build and operate websites of a few to a few dozen pages in the fastest and most secure way possible.

• File-based (JSON) — No database required. Just upload to any PHP-enabled server
• Modeless UI — No page transitions; all work done on a single screen for a snappy experience
• Markdown support — Easily edit and reuse content
• Component structure — Reusable and reorderable building blocks
• Per-component CSS management — Write CSS in small scopes without worrying about interference
• AI-generated code can be placed directly — No manual design work needed
• Static (SSG), dynamic, or mixed — Can be published as a fast static site
• DB Less DB — Embed data in pages and output via API for headless CMS use
• Podcast — Auto-generate RSS for podcast distribution
• MCP support — Connect with AI via MCP to automate operations such as article creation

Design Philosophy

Limited Scale

🍊mikanBox is not designed for sites with thousands of pages. There's no need to introduce a heavy database-backed system just for a small site that needs occasional updates. By intentionally avoiding a database, the following simplicity is achieved:

• Easy to install
• Simple, memorable structure
• Easy backup and server migration

Flexible Design

Pages and components are each bound to their own CSS, making them easy to understand and free from interference concerns. With the right use of components, you can achieve free and flexible site design.

• Pages and components can each have their own CSS
• CSS is scoped to prevent interference
• Components can be nested
• Media file paths (images, etc.) are resolved automatically
• Data can be easily embedded in pages
• Data from other pages or external sites can be loaded and used
• Multiple data formats allow for a wide variety of use cases

AI-Friendly

• AI-generated pages can be pasted directly — complex designs can be published with minimal effort
• Code is compact and simple — easy for AI to understand, so you can have it create pages or designs tailored to the specific data structure
• By using the {{EXT_MD:url}} tag to source external Markdown files (e.g., from GitHub), you can adopt an operational style where the website is updated simply by "instructing an AI agent to update the repository," without ever opening the admin panel
• Because the codebase is small and AI-friendly, new features are added by having AI rewrite the source — not via plugins
• MCP support makes AI integration straightforward. Article creation and other tasks can be automated

Simple Security

Supports static sites and is designed to minimize the attack surface.

• No database (no SQL attack surface)
• Small codebase
• No complex dependencies like plugins
• Less likely to be targeted like large-scale CMS systems

Two Usage Styles

🍊mikanBox handles pages with different lifespans using the same system.

Long-lived Content (e.g., Blog, Service Pages)

• Easy writing with Markdown
• Images referenced by filename only — no path worries
• Content structure designed for reuse
• Suitable for continuous updates

Short-term Pages (e.g., Landing Pages, Event Pages)

• Place AI-generated HTML/CSS/JS directly
• No manual design work needed when using AI
• Publish immediately

Intended Use Cases

Not designed for sites with thousands of pages.

• Personal websites
• Small shop websites
• Small business websites
• Websites with up to several dozen pages

Out of Scope

• Search functionality
• Pagination
• User management
• Contact forms (Google Forms is likely a better fit)

Setup & Distribution

🍊mikanBox is ready to use immediately by uploading it to a PHP-enabled server.

Installation

Upload the mikanBox folder to the same directory as index.php. This folder name can be changed. Changing it is recommended for security, as it makes the admin panel location (admin.php) harder to guess. If changed, update the $core_dir variable at the top of index.php. The following instructions refer to it as the mikanBox directory.

Initial Password Setup

After installation, the first person to access admin.php sets the admin password. The password hash (encrypted data) is stored in mikanBox/data/settings.json on the server.

When distributing (delivering) your designs and content to someone, clear the "password_hash" value in the mikanBox/data/settings.json file. This allows the recipient to set their own unique password on first access.

Files other than admin.php (such as JSON files in the data folder) are protected from direct browser access (via .htaccess restrictions).

Overview

🍊mikanBox builds and manages your site using the following four parts.

descriptionPages

Manage the actual pages of your site. Set the URL (ID), title, SEO information, and write the content (Markdown/HTML).

saveSite

Consolidates settings and management features for site operations, including the admin memo, Static Site Generation (SSG), site-wide settings, language, password change, backup, and AI prompt.

widgetsDesign

There are two types of components: Page components that define the overall page layout, and Part components that serve as reusable building blocks. Common elements like headers, footers, and navigation can be created as Parts and used anywhere. Its main role is managing design elements (components).

imageMedia

Manage image, video, and audio files. Upload, browse, resize, and quickly copy filenames for pasting.

Common

Opens the site's top page in a new tab.

Logs out of the system.

Opens the help page in a new tab.

Pages

This screen lets you view and manage all created pages in a list.

Creates a new page. Clicking it opens the page editing area.

Page List

• editEdit — Clicking this navigates to the editing screen for that page.
• open_in_new — Clicking this opens the page in a new tab at the URL matching its current publish status.

A dropdown menu to toggle the publish status of each page. Changes are saved immediately.

• Draft — Unpublished. Not accessible to anyone other than the admin.
• Public (Dynamic) — Served dynamically via PHP.
• Public (Static) — Published as a static HTML file, using the directory and file settings configured in Site > Static Site Generation (SSG).
• DB — The page itself becomes private, and the {{DATAROW}} data becomes readable as an API at siteURL/api/pageID.

When a page set to Public (Static) is changed to any other status, the static HTML file is deleted.

The identifier (slug) that becomes the page URL. For example, setting it to news makes the URL /news.

The page title. Clicking it navigates to the edit screen.

Set when the page is created. The date and time can be changed.

The display priority in navigation and other lists. In NAV_LINKS and NAV_CARDS lists, as well as this page list, a smaller number means it appears earlier (higher up). Items with an order below 0 are not shown in lists.

Displays the categories assigned to the page. Used for filtering in tags like {{NAV_LINKS:category}}.

Static Site Build Button

Located at the bottom of the page list. Exports all pages with status "Public (Static)" as static HTML files. After editing a "Public (Static)" page, inconsistencies with other pages can arise, so it is recommended to rebuild the entire site here.

Page Editing

This screen lets you edit the content and settings of a page in detail. It appears when you click the "Create New" button or a page's title or Edit button.

Set when the page is created. The date and time can be changed.

The page title. This is a required field. Can be output in components using {{TITLE}} or {{FULL_TITLE}} (in the format "Page Title - Site Name").

Select the page's publish status using radio buttons.

• Draft — Unpublished. Not accessible to anyone other than the admin.
• Public (Dynamic) — Served dynamically via PHP.
• Public (Static) — Published as a static HTML file, using the directory and file settings configured in Site > Static Site Generation (SSG).
• DB — The page itself becomes private, and the {{DATAROW}} data becomes readable as an API at siteURL/api/pageID.

When a page set to Public (Static) is changed to any other status, the static HTML file is deleted.

The identifier (slug) that becomes the page URL. Alphanumeric characters and hyphens are allowed. The page URL takes the form siteURL/ID. Note: if you save with an ID that matches an existing page, it will be overwritten. The index page ID cannot be changed. You can also use / in the ID itself. In a static site, a / in the ID is treated as a directory separator. In a dynamic site, a pseudo-directory structure is created as well. For example, setting an ID of news/2024 results in the URL siteURL/news/2024.

Select the page component to use for this page's layout. Components with "Use as a Page Component (Wrapper)" checked in the Design menu will appear as options.

Enter categories to classify the page, separated by commas. Currently used categories are displayed below the input field. Category listing pages are not created automatically. If needed, create a page and place {{NAV_LINKS:category}} or {{NAV_CARDS:category:componentID}} in it.

Specify the display order in navigation and other lists. Items are sorted in ascending numeric order. Items with an order below 0 are not shown in lists.

Specify the image filename (e.g., ogp.jpg) to use when shared on social media or displayed in card lists. Output as the og:image meta tag. Can be used in components as {{OGP_IMAGE}}.

Enter search keywords (meta keywords) for the page, separated by commas. Output in components as {{KEYWORDS}}.

Set a descriptive summary for the page. Output as {{DESCRIPTION}}, used as the snippet text shown below the title in search results.

Write the main content of the page in Markdown or HTML. Markdown and HTML can be mixed. Complex HTML generated by AI can be pasted directly and will work correctly. Refer to the guide at the bottom of the edit screen for available Markdown syntax and custom tags. See also the Markdown and Components (Tags) sections for more detail.

A checkbox at the top of the content area. When checked, the entire content is output as-is without Markdown processing. Use this as a last resort when complex AI-generated HTML layouts break under the normal HTML+Markdown mixed mode. In most cases, HTML+Markdown mixing (separated by blank lines) will work correctly.

Write styles to apply only to this page. They are automatically scoped so they do not affect other pages or areas outside the content. Custom tags can also be used within CSS.

Saves all content of the page.

Opens the page in a new tab at the URL matching its current publish status for review.

Returns to the page list. Any unsaved changes will be lost.

Permanently deletes the page. This cannot be undone.

At the bottom of the edit screen, a quick Markdown syntax guide and an available tags reference (tag guide) are shown in a collapsed state. Click to expand them.

Site

A menu that consolidates settings and management features for site operations. Each section is collapsed in accordion style (except the Admin Memo).

Admin Memo

A memo area that is always visible at the top of the admin panel, accessible only to the admin. Freely enter handover notes, work reminders, and so on.

Saves the memo content.

Version Information

Displays the currently installed version of mikanBox and the latest version available on GitHub. The latest version is fetched automatically and cached for 6 hours. If an update is available, an "Update available" notice is shown.

Static Site Generation (SSG)

🍊mikanBox can not only serve pages dynamically via PHP, but also export the entire site as static HTML files (SSG: Static Site Generation), and the two modes can coexist.

Benefits of SSG

• Ultra-fast display — Pages load faster because the server does not need to execute PHP.
• High security — By keeping PHP files and data (JSON) out of the public directory, the risk of tampering is reduced to an absolute minimum.

Set the base URL for building the static site. Example: https://example.com/ Auto-composed if not specified. Used for full URL output in tags such as https://yoshihiko.com/mikanbox and https://yoshihiko.com/mikanbox/help_en.html`.

Select the format of the generated HTML files.

• Directory-based (folder/index.html): Exported as pageID/index.html. The URL becomes /pageID/.
• File-name based (filename.html): Exported as pageID.html. The URL becomes /pageID.html.

The directory-based format allows publishing at the same URL as the dynamic site. Switching between the two won't break links. The file-name based format includes the extension in the URL and offers a simpler file structure.

Saves the settings, then exports all pages with status "Public (Static)" as static HTML files.

CSV Import

A tool that converts CSV data into the database format (DATAROW blocks) usable within the site.

Select a CSV file. Character encoding (UTF-8 / Shift-JIS) is detected automatically.

Reads the first row as field names and converts each subsequent row into a {{DATAROW:n}} block, then copies the result to the clipboard. After copying, paste it into the page content and save.

Usage Tips

• Field names (row 1) must be written in alphanumeric characters.
• Thousand-separator commas in prices (e.g., 1,000) are automatically quoted by Excel and will be read correctly.
• It is recommended to keep data-only pages set to Draft. They won't be visible to visitors, but can still be referenced from {{POST_MD:pageID#rowID:FIELD}} or {{NAV_CARDS}}.
• Setting the publish status to DB makes the page private as a page, while the {{DATAROW}} data becomes readable as an API at siteURL/api/pageID.

Site Settings

Set the name of the site. Can be output as {{SITE_NAME}}. {{FULL_TITLE}} displays in the format "Page Title - Site Name", used for bookmarks and page titles in search results.

Set a description for the site. If no per-page description is set, this is used as the page description in search results. Output as {{SITE_DESCRIPTION}}.

Set keywords for the site. If no per-page keywords are set, these are used as the search keywords.

Set the site-wide OGP image. If no per-page OGP image is set, this image is used when shared on social media. Output as {{SITE_OGP_IMAGE}}. Recommended size: 1200 × 630 px.

Saves the "Site Settings" content.

MCP API Key

An API key for integrating with AI tools such as Claude via MCP.

Write this into your AI's configuration file to enable access from the AI.

Regenerates the API key.

Copies the displayed API key to the clipboard. For Claude Code, paste it into the Claude Desktop settings. For more details, ask your AI assistant.

Language

Set the display language of the admin panel.

Choose from three options:

• Auto (Browser settings) — Automatically switches between Japanese and English based on your browser's language setting.
• Japanese
• English

Saves the language setting.

Change Password

Change the login password for the admin panel.

Enter the password currently used to log in.

Enter the new password (minimum 4 characters).

Changes and saves the password.

If you forget your password: Use FTP or a file manager to edit mikanBox/data/settings.json on the server and clear the value of password_hash. The initial password setup screen will appear on next access.

Backup

Download all site data (JSON) and uploaded media files (jpg, svg, etc.) as a ZIP file. Regular backups are recommended.

Exports and downloads all text data — articles, designs, settings, etc. — as JSON files.

Bundles all uploaded images and other files into a single ZIP for download.

AI Prompt

Save and copy "instructions" that serve as the base for the AI to correctly understand mikanBox's specifications when requesting page creation. Edit and save/copy as needed.

Enter and edit instructions for the AI. A base prompt covering 🍊mikanBox's structure and tag specifications is pre-filled. You can also append additional instructions.

Saves the "AI Prompt" within the site.

Copies the "AI Prompt" to the clipboard for pasting into an AI chat or other interface.

Design

Manage Page components that define the overall page design, and Part components that serve as reusable building blocks.

Creates a new component. Clicking it opens the design editing area.

Component List

Clicking the editEdit button navigates to the editing screen for that component.

The identifier for the component. Clicking it also navigates to the edit screen. IDs beginning with _ are system components provided by default. These can also be edited and used.

{{COMPONENT:_global_head}} contains the common settings for the <head> tag, and already includes for aggregated CSS output. When using AI-generated output as-is, use _ai as the base; otherwise, _layout is a good starting point.

Indicates the type of the component.

• Page — A component with "Use as a Page Component (Wrapper)" checked. Can be selected in the "Design Component" field when editing a page.
• Part — A building block to embed in pages or other components.

Shows the tag used to embed the component (e.g., {{COMPONENT:header}}). Clicking it copies it to the clipboard. Paste it into a page's content or another component's HTML to use it.

Design Editing

This screen is for defining the structure (HTML & CSS) and settings of a component.

The identifier for the component. This is a required field. Alphanumeric characters and underscores are allowed. Can be called from within templates as {{COMPONENT:ID}}.

Write the component's content in HTML. Refer to the guide at the bottom of the edit screen for available custom tags. Other components can also be nested and loaded here.

Write styles to apply only within this component. Custom tags can also be used within CSS.

A checkbox. Recommended to be ON in most cases. Prevents the CSS written here from affecting other parts of the site. Uncheck only when creating a global reset CSS to apply to the entire site, or a component for use in <head>.

Check this to make the component a layout wrapper for entire pages. When checked, it appears as Page in the Design list and becomes selectable in the "Design Component" field on the page edit screen. When unchecked, it functions as a Part component to be embedded in pages or other components.

The following additional tags are available in a Page Component (Wrapper):

• {{CONTENT}} — Insert where the page's main content should be output.
• — Aggregates and inserts the CSS from the page and its components. Styles will not apply without this tag.

Saves the component.

Returns to the Design admin screen. Any unsaved changes will be lost.

Permanently deletes the component. This cannot be undone.

At the bottom of the edit screen, an available tags reference (tag guide) is shown in a collapsed state. Click to expand it.

Media

This screen handles uploading and managing image, audio, and video files.

Upload Area

Click "Select File" to choose a file to upload. You can also drag and drop a file onto this window to upload it immediately on drop.

Uploads the selected file.

Supports jpg, png, gif, webp, svg, mp3, m4a, mp4. Maximum file size depends on server settings.

Uploaded files are stored in the media directory. How to reference them in Markdown or HTML:

• Markdown: ![description](filename) or {{IMAGE:filename}} (also {{AUDIO:filename}}, {{VIDEO:filename}})
• HTML: Any of <img src="filename">, <img src="images/filename">, or <img src="media/filename"> will work.

Media List

Images display as thumbnails. Video and audio files display as icons.

Clicking the filename copies it to the clipboard. Paste it into page content to use.

Shows the file format (e.g., JPG) and, for images, the resolution (width × height).

Deletes the media file. This cannot be undone.

Clicking "Resize..." expands the resize controls. Enter either a Width (W) or Height (H) value and press save to resize while maintaining the aspect ratio (jpg, png, gif, webp only).

Markdown

In page content, you can use standard Markdown syntax. Markdown and HTML can be mixed. Content is treated as Markdown by default, but lines beginning with HTML tags are treated as HTML code. Line breaks before or after HTML tags are optional; the display is the same either way.

A guide to available Markdown syntax is available at the bottom of the page edit screen.

Markdown and HTML

Markdown and HTML can be mixed. Lines beginning with the following HTML tags are treated as HTML code:

html head body div section article aside header footer main nav form p h1–h6 ul ol li dl dt dd table thead tbody tr th td blockquote pre figure figcaption details summary dialog a span button select video audio script style link meta <!-- (comment) and more
Both opening and closing tags (e.g., </div>, </a>) apply.

For complex layouts where mixing Markdown and HTML is not sufficient, enable the "Raw HTML" checkbox in the page editor to disable Markdown processing entirely and output HTML as-is.

Paragraphs

Text surrounded by blank lines that does not start with an HTML tag or Markdown symbol is treated as a paragraph and wrapped as <p>content</p>. A line break within a paragraph inserts a <br> tag (except immediately before or after an HTML tag). HTML tags can also be inserted within a paragraph.

Headings

Using ## Heading at the start of a line treats it as a heading, output as <h2>Heading</h2>. Since <h1> (marked with #) is typically used for the page title, it is best to use ## Heading and ### Subheading within the content body. A space after the # symbol is required.

Markdown:## Heading HTML:<h2>Heading</h2>

Other Block Elements

Lists, numbered lists, blockquotes, horizontal rules, and inline code are each replaced with their respective HTML when used at the start of a line.

Markdown:- List item HTML:<ul><li>List item</li></ul>

Markdown:* List item HTML:<ul><li>List item</li></ul>

Numbered list 1.: <ol><li> Markdown:1. Numbered list item HTML:<ol><li>Numbered list item</li></ol>

List items can use either - or *. A space after the symbol is required.

Markdown:> Quote HTML:<blockquote>Quote</blockquote>

A space after the > symbol is optional.

Markdown:--- HTML:<hr>

Inline Elements

Markdown:**bold** HTML:<strong>bold</strong>

Markdown:*italic* HTML:<em>italic</em>

Links

Links are specified in the format [link text](URL). Output as <a href="URL">link text</a>.

Markdown:[link text](URL) HTML:<a href="URL">link text</a>

Media

To display an image, embed it with ![image description](filename). The content of [ ] is the alt text, and it is output as <img src="image URL" alt="image description">. Images uploaded via Media management can be used by specifying just the filename. The custom tag {{IMAGE:filename}} works in the same way. Audio and video files managed in Media can be used with {{AUDIO:filename}} and {{VIDEO:filename}}.

Markdown:![image description](filename) HTML:<img src="image URL" alt="image description">

Custom tag:{{IMAGE:filename}} HTML:<img src="image URL">

Custom tag:{{AUDIO:filename}} HTML:<audio src="audio URL" controls></audio>

Custom tag:{{VIDEO:filename}} HTML:<video src="video URL" controls></video>

Tables

Tables are created by separating cells with |. Including a |---| row is required for table formatting. The first row is the header row <th>, and rows from the third onward are data rows <td>. You can specify alignment by adding colons: |:---|:---:|---:|.

| Default | Left | Center | Right | |---|:---|:---:|---:| | A | B | C | D |

Adding {.className} or {#idName} at the end of a Markdown line assigns a CSS class or id to that line's block element.

Important: {.className} must be written at the end of the same line as the target text. Writing it on a separate line will have no effect. For multi-line paragraphs, place {.className} at the end of the last line to apply the class to the entire paragraph.

Markdown:## Heading{.highlight} HTML:<h2 class="highlight">Heading</h2>

Markdown:Paragraph text{.note #intro} HTML:<p class="note" id="intro">Paragraph text</p>

For inline text, the [text]{.className} syntax outputs a <span> with the class or ID applied. Multiple classes and combinations with IDs are also supported.

Markdown:[Red text]{.red} HTML:<span class="red">Red text</span>

Markdown:[**Bold** emphasis]{.highlight .bold} HTML:<span class="highlight bold"><strong>Bold</strong> emphasis</span>

Markdown:[Anchor]{#my-id .note} HTML:<span id="my-id" class="note">Anchor</span>

These syntaxes are 🍊mikanBox-specific Markdown extensions. They will not work in other Markdown renderers (such as GitHub).

Components (Custom Tags)

Using Tags

In page content & CSS, and in component HTML & CSS, you can use prepared tags such as {{TITLE}}. Available tags are listed in the guide at the bottom of the page edit screen and design edit screen.

Using Components

Components created in Design management can be embedded in pages or other components using the form {{COMPONENT:ID}}.

Images, Audio & Video

Images, audio, and video can be embedded using {{IMAGE:filename}}, {{AUDIO:filename}}, and {{VIDEO:filename}}.

{{IMAGE:filename}} → <img src="media/filename"> {{AUDIO:filename}} → <audio src="media/filename" controls></audio> {{VIDEO:filename}} → <video src="media/filename" controls></video>

Navigation

A link list is output with {{NAV_LINKS:category}} as <li> list items.

For output as image cards or similar, use {{NAV_CARDS:category:componentID}}. The card design can be defined in a component. If the component ID is omitted, the standard design (the _nav_card component) is used.

The order of items in lists and cards is controlled by the page's "Order" value. Items with an order below 0 are not displayed.

For both tags, setting category to all outputs a list of all pages; leaving it empty outputs a list of pages with no category. Since a page can have multiple categories, setting them appropriately enables a wide variety of navigation configurations.

Embedding Other Pages

The content of other pages can be embedded using {{POST_MD:ID}}. To make part of a complex AI-generated page (such as an announcements section) easily editable, it's useful to embed a separate Markdown-based page. The embedded page can be set to "Draft" so it doesn't appear on its own.

Embedding External Markdown Documents

Markdown documents hosted on other sites, such as GitHub, can be embedded using {{EXT_MD:url}}. You can edit directly on GitHub, and it also enables an "AI-friendly" workflow where the site is updated simply by having an AI agent rewrite files on GitHub.

Page Components

For a component that lays out the entire page, insert {{CONTENT}} where the content should appear, and for CSS output. Without , styles will not be applied. For a basic structure, refer to the _layout default component.

Available Tags Reference

Default Components

A list of components included on installation. They can be viewed and edited in the Design admin screen.

Data Embedding, Loading & API

Data Formats

Three types of data formats are supported:

• Markdown: Markdown data from within the site or externally (e.g., GitHub)
• Data: Key-value format individual data, similar to WordPress custom fields
• DataBase: Table-format data using {{DATAROW}}

Loading Markdown

Load other pages as Markdown

Not only components, but other pages themselves can also be loaded as Markdown. Instead of directly editing a complex page, you can update it by simply updating a separate, simpler page.

Load pages from other sites as Markdown

By loading pages from other sites (such as GitHub) as Markdown, you can update your site without directly touching it. JavaScript is disabled for security purposes.

Loading GitHub Pages as Markdown

A GitHub .md file can be loaded by converting its URL to the raw format as follows:

Before: https://github.com/yoshihik0/testData/blob/main/md-test.md

After: https://raw.githubusercontent.com/yoshihik0/testData/main/md-test.md

Conversion rule

github.com → raw.githubusercontent.com
/blob/ → / (remove)

Usage: {{EXT_MD:https://raw.githubusercontent.com/yoshihik0/testData/main/md-test.md}}

For services other than GitHub:

Dropbox: Change to ?dl=1 Google Docs: Publish the document, then append /export?format=txt

Embedding and Using Data in Pages

Writing {{DATA:key}}data{{/DATA}} lets you embed information in a page — just like WordPress custom fields — and use it from within the page or from other pages. The key can contain alphanumeric characters and _. Adding :GHOST like {{DATA:key:GHOST}}data{{/DATA}} hides the data from display on the page itself.

Access from the same page: {{POST_MD::key}} Access from another page: {{POST_MD:pageID:key}}

Embedding and Using Data from External Sites

The {{DATA:key}}data{{/DATA}} format can also be loaded from pages on other sites, such as GitHub. Since this enables updates without directly touching the site, it works well with GitHub, which is AI-friendly, for easy automated operation.

Access data from an external site: {{EXT_MD:url:key}}

DB Less DB: Embed a Database in a Page

Writing {{DATAROW:rowID}}{{DATA:key}}data{{/DATA}}{{/DATAROW}} embeds table-format data in a page, accessible from within the same page or from other pages. Without using a database, the page itself becomes a database.

Display table-format data from current page: {{POST_MD::#rowID:key}} Display table-format data from specified page: {{POST_MD:pageID#rowID:key}}

Load External Databases Too

The {{DATAROW:rowID}}{{DATA:key}}data{{/DATA}}{{/DATAROW}} format can also be loaded from pages on other sites, such as GitHub.

External page table-format data: {{EXT_MD:url#rowID:key}}

Convert CSV Data

Using "CSV Import" in the Site menu, you can convert CSV data from Excel and similar tools into the {{DATAROW}} format. Even for larger datasets, the process is effortless.

The first row is read as field names, and each subsequent row is converted into a {{DATAROW:n}} block and copied to the clipboard. After copying, paste into the page content and save.

Works as a Headless CMS Too

By publishing a page with embedded {{DATAROW}} using the "DB" status, it becomes readable externally via API.

https://yoursite.com/api/pageID

Example: https://yoshihiko.com/mikanbox/demo/api/sample-DB

Create Cards for Various Types of Information

This information can also be used in card-format displays (record list views), making it possible to create product catalog pages and similar content.

Create a page with an audio file embedded and set its category to "podcast". An RSS feed for pages in the "podcast" category only is automatically output at the following URL, enabling podcast distribution.

https://yoursite.com/podcast.xml

Embed the following data fields. AUDIO_FILE is required.

{{DATA:AUDIO_FILE:GHOST}}episode01.mp3{{/DATA}} {{DATA:DURATION:GHOST}}25:30{{/DATA}} {{DATA:FILE_SIZE:GHOST}}24500000{{/DATA}}

Available Data Fields for Podcast Pages

{{DATA:AUDIO_FILE:GHOST}}episode01.mp3{{/DATA}} ← required {{DATA:DURATION:GHOST}}25:30{{/DATA}} {{DATA:FILE_SIZE:GHOST}}24500000{{/DATA}} {{DATA:EPISODE_NUM:GHOST}}1{{/DATA}} {{DATA:SEASON:GHOST}}1{{/DATA}} {{DATA:SUBTITLE:GHOST}}This episode is about...{{/DATA}} {{DATA:EPISODE_IMAGE:GHOST}}ep01-cover.jpg{{/DATA}} {{DATA:EPISODE_TYPE:GHOST}}full{{/DATA}} {{DATA:EXPLICIT:GHOST}}false{{/DATA}}

The title {{DATA:TITLE}} and description {{DATA:DESCRIPTION}} are automatically pulled from the page settings.

Available fields vary by platform.

Podcast Distribution Steps

1. Create a podcast episode page in 🍊mikanBox (category: "podcast")
2. https://yoursite.com/podcast.xml is automatically generated
3. Register that URL with each platform

Simply upload audio files to 🍊mikanBox's Media — that's all you need.

Sitemap · RSS · API

Sitemap

A sitemap is output at the following URL:

https://yoursite.com/sitemap.xml

Example: https://yoshihiko.com/mikanbox/demo/sitemap.xml

RSS

An RSS feed is output at the following URL:

https://yoursite.com/rss.xml

Example: https://yoshihiko.com/mikanbox/demo/rss.xml

Podcast RSS

Embed audio on a page and set its category to "podcast" to automatically output an RSS feed for "podcast" category pages only at the following URL:

https://yoursite.com/podcast.xml

Example: https://yoshihiko.com/mikanbox/demo/podcast.xml

API

By publishing a page with embedded {{DATAROW}} using the "DB" status, it becomes readable externally via API.

https://yoursite.com/api/pageID

Example: https://yoshihiko.com/mikanbox/demo/api/sample-DB

Publishing AI-Generated Designs

Where to Write CSS

In mikanBox, where you write CSS depends on its scope. Avoid writing <style> tags inside page Content or component HTML.

Add this instruction to your AI design prompt:

Output as a single HTML file including CSS and JS. Use images/filename or media/filename for images.

Once the page is generated, place it using the following steps:

1. In the "Page Editing" screen, select _ai as the Design Component.
2. Paste all content of the generated HTML into the "Content" field.
3. Check the "Raw HTML" checkbox and save.

Shared Header / Footer Across Multiple Pages

To share the same header and footer across multiple pages, create a custom wrapper component.

Steps:

1. Go to "Design" → "Create New" and create a component (e.g., ID: mysite_layout).
2. Enable "Use as a Page Component (Wrapper)" (Scope CSS is recommended OFF).
3. Use the _ai component HTML as a base, then add header and footer HTML inside <body>. Place {{CONTENT}} where the page body should be inserted.
4. Write shared CSS for all pages using this wrapper in this component's "CSS" field.
5. On each page that should use this wrapper, select mysite_layout as the "Design Component".
6. In each page's "Content" field, write only the <main> or <article> portion (Markdown is fine).

Note: Editing _ai directly affects all pages. Creating a separate site-specific wrapper lets you keep _ai untouched while having full control over your layout.

Connecting AI via MCP

🍊mikanBox supports MCP (Model Context Protocol), allowing AI tools like Claude to act as a site editing assistant.

What is MCP?

MCP (Model Context Protocol) is an open standard that lets AI tools interact with external services and data. With MCP enabled, you can simply talk to Claude and have it operate your site directly.

What you can ask AI to do

• "Write 5 articles on this keyword and publish them"
• "Review all drafts and publish them in order of quality"
• "Create an English version of this article under a new slug"
• "Fill in missing meta descriptions for all pages"
• Import from a spreadsheet → "Generate product pages in bulk"

Setup (local environment)

1. Generate an API key

In the admin panel, go to "Site" → "MCP API Key" and click "Generate API Key". Copy the generated key.

2. Edit Claude Desktop config

Add the following to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "🍊mikanBox": {
      "command": "php",
      "args": ["/your-path/mikanBox/mcp.php"]
    }
  }
}

3. Restart Claude Desktop

After restarting, 🍊mikanBox tools will be available in the chat.

Setup (remote/shared hosting)

To connect Claude Desktop to a 🍊mikanBox running on a remote server, use mcp-remote — a local tool that runs on your Mac. No additional installation is required on the server.

Your Mac
  Claude Desktop ↕ stdio
  mcp-remote (runs locally) ↕ HTTPS
Shared hosting server
  mcp.php (PHP only, nothing else needed)

Claude Desktop config:

{
  "mcpServers": {
    "🍊mikanBox": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://yoursite.com/mikanBox/mcp.php",
        "--header",
        "X-API-Key: your-generated-api-key"
      ]
    }
  }
}

Node.js (npx) is required to use mcp-remote.

MCP API Key

Generate and view your API key in the admin panel under "Site" → "MCP API Key". You can also set any string you like — a random string is recommended for security. You can generate one in Terminal with openssl rand -hex 24.

Generates a new random API key and saves it. If you regenerate, update your Claude Desktop config with the new key.

Copies the API key to the clipboard.

Running multiple sites

Set a different API key for each 🍊mikanBox and add each entry to your Claude Desktop config.

{
  "mcpServers": {
    "Site A": {
      "command": "npx",
      "args": ["mcp-remote", "https://site-a.com/mikanBox/mcp.php", "--header", "X-API-Key: key-a"]
    },
    "Site B": {
      "command": "npx",
      "args": ["mcp-remote", "https://site-b.com/mikanBox/mcp.php", "--header", "X-API-Key: key-b"]
    }
  }
}

Available tools

Announcement

The creator of this program is available for CMS design, UI design, development, and operation services based on this program.
In addition, consultations are welcome in the fields of UI design, information architecture, DX promotion, AI utilization, internal communications, design education, and content production.

Books: Design Classroom, Design Lessons, Basic Rules of Flat Design

http://yoshihiko.com

License

MIT License

Copyright (c) 2026 yoshihiko.com