51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T925,

Subtractive design

The graph in the hero of mokujiro.com is an iteration of MokuGraph, the d3 force graph component I sell for Framer. I rebuilt it around what the studio offers instead of every tool I use.

What I changed for this site

- Positions are calculated, not simulated. A pure function puts the hub at the centre and spaces each ring evenly around it, ordered by which parent a node hangs off. The simulation only holds nodes on those targets, so the layout is identical on every load.

- Rings are true circles sized to the shorter side of the frame, so the four arms match in every direction.

- Four tiers, separated by size and opacity. Only the hub and the four entry points are meant to be read; the other 23 show the shape.

- One link per entry point. A second link on one node made the rule invisible, so it came out.

What MokuGraph already does, before you change anything

- Click a node and a drawer opens with the title, description, tags and related nodes, each clickable.

- Side drawer on desktop, narrower on tablet, bottom sheet under 480px. You do not build that three times.

- Touch is handled: pinch to zoom, tap to highlight, tap again to open.

- Every visual property sits in the panel, including the physics: link distance, charge, connection strength, node size.

- D3 is bundled. No runtime network requests, nothing to install.

- 12 templates modelled on real AI architectures, or paste your own JSON.

Two things that cost me a day

- Framer keeps every breakpoint in the DOM and hides the inactive ones, so the same elementId exists three times. Pick the one with a height before you scroll to it.

- A stretched instance can hand your component the string "100%" as its width. Compare that to a number and the check fails silently.

That is the part you are actually buying when you buy a component instead of building one.

The graph in this post: mokujiro.com

The component: mokujiro.com/products/mokugraph

53:T6bf,

mokujiro.com is now bilingual: English by default, Japanese at /ja.

What I used in Framer

- Localization add on for the ja locale. hreflang, canonicals and the sitemap per locale came for free.

- CMS localization for case studies, products, lab and services. Text fields got Japanese, slugs and images stayed shared.

- useLocaleInfo in code components. The language switcher, banner, hero graph and approach tabs carry an en / ja dictionary and switch themselves.

- Custom Code for the typeface. IBM Plex Sans has no Japanese glyphs, so Noto Sans JP sits behind it as the fallback on Japanese pages.

How the Japanese was done

- Step 1: AI translated the English into Japanese. This gave coverage, not quality.

- Step 2: the AI read only the Japanese, worked out what each sentence was trying to say, then rewrote it to express that intent. The English was no longer in the loop.

- Step 3: I reviewed everything. A lot still needed changing. Japanese readers notice immediately when Japanese is not native, and a literal translation reads as foreign even when it is correct.

- Pushed through the Framer plugin API: about 780 strings, 24,000 English words. An audit script then compared every page in both languages before launch.

Two things worth knowing

- Localise code components in code, not through the panel.

- Framer sets html lang after hydration, so a CSS rule that depends on lang="ja" needs a one line script before first paint.

mokujiro.com/ja

54:T7e1,

MokuToc reads the headings that are already on your page.

It finds every H2 and H3, assigns anchors, and marks the current section as the reader scrolls. There is no list to maintain when the copy changes.

Finds your article on its own

Drop it on the page and it works: MokuToc takes the part of the page with the most headings. To limit it to one layer, type that name under Setup.

Requirements

A code component for long-form pages. Your section titles need a text style tagged Heading 2 or Heading 3.

Desktop: a rail, not a sidebar

Thin dashes at the edge of your content. Hover or focus opens one popover with every heading title, the active heading in your accent colour.

Mobile: a bar that gets out of the way

Below your breakpoint the rail becomes a sticky bar naming the current section. Scroll down and it slides to the top of the screen, scroll up and it drops under your header.

Tuned from the properties panel

Rail geometry, popover size, header height, scroll margin, edge gap, mobile breakpoint and padding, plus 10 colours across light and dark sets. It picks the set by sampling the background it sits on, so it follows a theme toggle.

Keyboard and screen reader

Dashes are tabbable, focus opens the popover, Enter jumps, Escape closes. The mobile bar is a real button, panel entries carry aria-current, and reduced motion is respected.

Nothing showing?

If a page has no H2 or H3 headings, MokuToc says so beside the rail, on the canvas and in preview only. Readers never see it.

Good to know

MokuToc reads H2 and H3, with an H2-only option. H1 and H4 are ignored. The Framer canvas shows a static three-dash placeholder; open Preview or publish to see the live rail.

Refunds

Full refund within 14 days. If something does not work as described, that window does not apply: email me and I will fix it or refund you. Your statutory consumer rights are unaffected.

55:T8b2,

MokuDocs 2.0 is a Framer-native documentation system for product teams.

Manage docs, changelogs, glossary, search, bookmarks, and reader tools in one Framer project using native CMS. No separate docs platform or changelog tool.

Requirements

A documentation site template, not a general business or marketing website. You edit it inside Framer, so basic Framer knowledge is required: duplicating a project, editing CMS items, and publishing a site.

Not sure it fits? Email hello@mokujiro.com before you buy.

CMS-driven documentation

Docs and categories live in Framer CMS, not hardcoded pages. Add a page, assign a category, publish. No engineering release needed.

Built-in changelog

Release notes alongside your docs, with tag-based filtering.

Inline glossary

Terms become clickable definitions that open in a side panel, without leaving the page.

Highlights, notes, and bookmarks

Readers save passages, add notes, and return to them from a dedicated panel.

Search and navigation

A table of contents keeps long pages navigable, and Framer Site Search adds full-text search.

Accessibility built in

Keyboard navigation, focus states, and semantic structure, designed with WCAG AA in mind.

Light and dark themes

Supported out of the box.

Good to know

Site Search requires Framer Pro or higher. Site Search and theme switching work only on a published site, not in Framer Preview. The table of contents is desktop only, hidden below 810px. Code blocks use Framer's native code editor and have no copy button.

Support

hello@mokujiro.com

Refunds

Full refund within 14 days. Delivery is a Framer remix link that cannot be revoked, so a refund requires written confirmation that you have deleted the project and will not use or distribute the template or its assets.

56:T69a,

MokuGraph is an interactive AI architecture component for Framer.

Visualise AI agents, RAG pipelines, MCP systems, knowledge graphs, and product ecosystems using ready-made templates or your own JSON data.

12 built-in architecture templates

AI Agent Architecture
Multi-Agent Team
RAG Pipeline
Agentic RAG
MCP Architecture
AI Customer Support
AI Sales Copilot
AI Memory System
AI Research Workflow
AI Coding Assistant
Knowledge Graph
Product Ecosystem

Build your own graph with JSON

Start with any template, customise it, or paste your own JSON into the Custom Graph Data property to generate a custom architecture map directly in Framer.

Features

Interactive force-directed graphs
12 templates based on real-world AI system patterns
Custom JSON data support
Force and radial layouts
Responsive across desktop, tablet, and mobile
Configurable colours, typography, nodes, edges, and physics
Optional detail drawer for deeper exploration and documentation

Ideal for

AI startups
SaaS and product teams
Developer documentation
Technical blogs
Architecture diagrams
Product and landing pages

Turn complex AI systems into interactive architecture maps without drawing diagrams manually.

57:T5cc,

Setting up a docs site from scratch can take weeks. MokuDocs helps you launch one in an afternoon.

MokuDocs is a Framer documentation template built entirely on native CMS, without requiring external tools or third party content platforms. It gives you a structured and scalable starting point for product docs, help centres, and knowledge bases.

What’s included

CMS powered documentation pages
Category based sidebar navigation with accordion behaviour and active states
Site wide search with a Cmd+K modal
Light and dark mode with a manual toggle
Auto generated table of contents built from headings
Bookmark system and continue reading
Reading progress bar on doc pages
New and updated badges in the Docs Hub
Breadcrumbs and previous / next navigation
18 plus sample docs across multiple categories
FAQ and custom 404 page

Built for

SaaS teams launching product documentation quickly
Founders who want a polished docs site without building from scratch
Framer designers who need a structured documentation system
Teams that want to manage content directly in Framer CMS

Everything runs on native Framer CMS, so you can update, organise, and expand your documentation without relying on external tools.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-8ad4f2ed-f0a4-4d66-a8af-d4428fef994a-all:/unified/creator/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/activity/":[{"data":[{"id":"01a0983c-cb0d-7322-8143-7a3db71693c8","type":"creator.followed","target":{"type":"creator","id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","preview":"PixlForm®","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d7b633f0-85d0-4e75-b61f-08c45984e34b/pdzpgzrh","slug":"pixl-form","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T00:48:36.104Z","latestAt":"2026-09-13T00:48:36.104Z"},{"id":"019ef8c9-3926-7453-acaf-cb828f95f4d6","type":"creator.followed","target":{"type":"creator","id":"3fc00e47-c692-4bee-8134-6528efa80a1e","preview":"TaktForm","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/489296/avatar-BEGwlOas8ClsvEH0ayihFWJI4HzcqV.jpg","slug":"taktform","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-29T23:25:02.252Z","latestAt":"2026-08-29T23:25:02.252Z"},{"id":"019ef8c9-574b-75ad-926f-d8730d0b97b4","type":"creator.followed","target":{"type":"creator","id":"a3a50c10-7d16-410f-8a82-19525b1f5ba2","preview":"Arini Studio LLC","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29247/avatar-e0gYlLBVVN9BbdX6o2q98TKsuGpZCG.jpg","slug":"arinistudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-29T23:24:44.850Z","latestAt":"2026-08-29T23:24:44.850Z"},{"id":"01a04fd6-f46e-7465-88b8-5b0540e24963","type":"creator.followed","target":{"type":"creator","id":"92c2a437-4e58-4cd2-9a23-5fd81786f849","preview":"Webnity-X","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/92c2a437-4e58-4cd2-9a23-5fd81786f849/fs1ughi6","slug":"webnity-x","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-29T23:24:42.470Z","latestAt":"2026-08-29T23:24:42.470Z"},{"id":"019ef8c9-4e0d-755e-bd21-5ebe61c9ec62","type":"creator.followed","target":{"type":"creator","id":"e384faea-043f-4f5c-bd25-070ec91488d7","preview":"FramerGeeks","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/65683/avatar-DpmNXlAfqaNbZuhHKKWXXcPtwRkgYh.jpg","slug":"framergeeks","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-29T23:24:34.627Z","latestAt":"2026-08-29T23:24:34.627Z"},{"id":"01a04fd6-bf2b-750a-b633-28419389372b","type":"creator.followed","target":{"type":"creator","id":"f33ed3b3-7dd6-4779-b570-bd71bac30374","preview":"Another Vision | SaaS | Enterprise-level","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f33ed3b3-7dd6-4779-b570-bd71bac30374/lwkdktkr","slug":"another-vision","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-29T23:24:28.838Z","latestAt":"2026-08-29T23:24:28.838Z"},{"id":"01a02ecd-3274-7240-8211-3e2ae6c7f3a7","type":"comment.liked","target":{"type":"comment","id":"01a02ec9-5005-71ec-8334-96b1a8ee6805","preview":"reads the h2s already there, nothing to maintain","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"reads the h2s already there, nothing to maintain"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a02ebb-7df7-76fc-a38e-43002fbff396","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a02ec9-5005-71ec-8334-96b1a8ee6805"},"repost":null}},"context":{"type":"post","id":"01a02ebb-7df7-76fc-a38e-43002fbff396","preview":"MokuToc is live: a minimal table of contents component built around progressive disclosure.\nReaders need orientation constantly, but the full outline only occasionally. That tension became the starting point for the component.\nOn desktop, the structure is reduced to a quiet rail of thin dashes. It keeps a sense of position and progress visible, while the full list of headings only appears when the reader reaches for it.\nOn mobile, the same idea becomes a sticky current-section bar, with the wider structure available on tap.\nUnderneath, MokuToc reads the H2 and H3 headings already on the page, creates anchors, and follows the active section as the reader moves through the content.\nThe aim was to make navigation present enough to support orientation, but quiet enough for the content itself to remain the main experience.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MokuToc is live: a minimal table of contents component built around progressive disclosure."}]},{"type":"paragraph","content":[{"type":"text","text":"Readers need orientation constantly, but the full outline only occasionally. That tension became the starting point for the component."}]},{"type":"paragraph","content":[{"type":"text","text":"On desktop, the structure is reduced to a quiet rail of thin dashes. It keeps a sense of position and progress visible, while the full list of headings only appears when the reader reaches for it."}]},{"type":"paragraph","content":[{"type":"text","text":"On mobile, the same idea becomes a sticky current-section bar, with the wider structure available on tap."}]},{"type":"paragraph","content":[{"type":"text","text":"Underneath, MokuToc reads the H2 and H3 headings already on the page, creates anchors, and follows the active section as the reader moves through the content."}]},{"type":"paragraph","content":[{"type":"text","text":"The aim was to make navigation present enough to support orientation, but quiet enough for the content itself to remain the main experience."}]}]},"thumbnail":"https://image.mux.com/9DoSI01of00eOzFZLXogUnn3us9hjPlbFG19jLEmoxwHI/thumbnail.webp?time=2.792","targetDeleted":false,"owned":true,"actions":{"postId":"01a02ebb-7df7-76fc-a38e-43002fbff396","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-23T13:26:34.863Z","latestAt":"2026-08-23T13:26:34.863Z"},{"id":"01a02cc4-d389-726b-8743-0ab73a465f1e","type":"component.created","target":{"type":"component","id":"9HnNDTbQZbu4HdEWqgQt","preview":"MokuToc","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/01a02e08-0d8e-76e8-816d-102fa386f166.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-23T03:58:11.849Z","latestAt":"2026-08-23T03:58:11.849Z"},{"id":"01a002aa-d5c0-76bf-a8d8-c88f06572854","type":"comment.reply","target":{"type":"post","id":"019fc181-bda1-7393-bbfa-ff6de5497d86","preview":"MokuDocs 2.0","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/019fc248-1f53-7778-b10b-039255b71be3.png","targetDeleted":false,"owned":true,"actions":{"postId":"019fc181-bda1-7393-bbfa-ff6de5497d86","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a002aa-d5a7-73a5-83cb-fec3af503419","preview":"Thanks for purchasing MokuDocs 2.0, Aaron, and thanks for flagging this. The menu itself tested fine before release, but your report helped me identify an issue with the header panel behaviour on mobile. I’ve updated the template and the Marketplace remix today, so new duplicates will include the latest version.\nYour existing copy won’t update automatically, so I can send you the two updated files by DM. Applying them should only take about a minute. Could you DM me your published or preview URL, and let me know if you’ve changed the header or mobile navigation since duplicating the template? If what you’re seeing is different, I’ll take a closer look and help get it sorted.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks for purchasing MokuDocs 2.0, Aaron, and thanks for flagging this. The menu itself tested fine before release, but your report helped me identify an issue with the header panel behaviour on mobile. I’ve updated the template and the Marketplace remix today, so new duplicates will include the latest version."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Your existing copy won’t update automatically, so I can send you the two updated files by DM. Applying them should only take about a minute. Could you DM me your published or preview URL, and let me know if you’ve changed the header or mobile navigation since duplicating the template? If what you’re seeing is different, I’ll take a closer look and help get it sorted."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019fc181-bda1-7393-bbfa-ff6de5497d86","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a00142-81ca-728b-9bfa-4db901e908a9"},"repost":null}},"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-14T23:45:45.408Z","latestAt":"2026-08-14T23:45:45.408Z"},{"id":"019fc181-bf33-71af-90bc-a9879ce8f767","type":"template.created","target":{"type":"template","id":"70565","preview":"MokuDocs 2.0","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/019fc248-1f53-7778-b10b-039255b71be3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-08-02T08:05:33.619Z","latestAt":"2026-08-02T08:05:33.619Z"},{"id":"019f0762-def7-746f-989e-ac43f19f303d","type":"post.liked","target":{"type":"post","id":"019f0752-892c-7210-896b-5c9752ef1ca3","preview":"Footer design for my first framer template called as Travix❤","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Footer design for my first framer template called as Travix❤"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/573cca16-a91e-4dba-885a-6f3bce4dd2da/34gcbq7o","targetDeleted":false,"owned":false,"actions":{"postId":"019f0752-892c-7210-896b-5c9752ef1ca3","like":{"count":20,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-27T04:42:27.956Z","latestAt":"2026-06-27T04:42:27.956Z"},{"id":"019f075f-df00-70fd-b979-62b771b24bae","type":"comment.reply","target":{"type":"post","id":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","preview":"Exploring Framer beyond traditional websites.\nhttps://mokujirodesign.space/photography\nAn AI-assisted photography publishing workflow combining Lightroom, Claude Code and Framer. The goal is to reduce repetitive publishing tasks, leaving more time behind the camera and developing photographs.\nWorkflow highlights: \n• AI aperture estimation for vintage lenses \n• AI-generated structured metadata \n• Human review before manually publishing to Framer","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Exploring Framer beyond traditional websites."}]},{"type":"paragraph","content":[{"type":"text","text":"https://mokujirodesign.space/photography","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://mokujirodesign.space/photography","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"An AI-assisted photography publishing workflow combining Lightroom, Claude Code and Framer. The goal is to reduce repetitive publishing tasks, leaving more time behind the camera and developing photographs."}]},{"type":"paragraph","content":[{"type":"text","text":"Workflow highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• AI aperture estimation for vintage lenses "}]},{"type":"paragraph","content":[{"type":"text","text":"• AI-generated structured metadata "}]},{"type":"paragraph","content":[{"type":"text","text":"• Human review before manually publishing to Framer"}]}]},"thumbnail":"https://image.mux.com/Zq6dzy4Hdi3gTx02v3gQOMK9K01J00ijD1lhz9NGt629R8/thumbnail.webp?time=20.333","targetDeleted":false,"owned":true,"actions":{"postId":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f075f-dee2-7084-a82d-13aee26aa0d8","preview":"thanks!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"thanks!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f0755-e485-74df-ab98-6cf0ee262c71"},"repost":null}},"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-27T04:39:11.360Z","latestAt":"2026-06-27T04:39:11.360Z"},{"id":"019f075f-bebd-72e7-aedc-c6307b03778c","type":"comment.liked","target":{"type":"comment","id":"019f0755-e485-74df-ab98-6cf0ee262c71","preview":"clean enough to steal the attention❤","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"clean enough to steal the attention❤"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f0755-e485-74df-ab98-6cf0ee262c71"},"repost":null}},"context":{"type":"post","id":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","preview":"Exploring Framer beyond traditional websites.\nhttps://mokujirodesign.space/photography\nAn AI-assisted photography publishing workflow combining Lightroom, Claude Code and Framer. The goal is to reduce repetitive publishing tasks, leaving more time behind the camera and developing photographs.\nWorkflow highlights: \n• AI aperture estimation for vintage lenses \n• AI-generated structured metadata \n• Human review before manually publishing to Framer","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Exploring Framer beyond traditional websites."}]},{"type":"paragraph","content":[{"type":"text","text":"https://mokujirodesign.space/photography","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://mokujirodesign.space/photography","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"An AI-assisted photography publishing workflow combining Lightroom, Claude Code and Framer. The goal is to reduce repetitive publishing tasks, leaving more time behind the camera and developing photographs."}]},{"type":"paragraph","content":[{"type":"text","text":"Workflow highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• AI aperture estimation for vintage lenses "}]},{"type":"paragraph","content":[{"type":"text","text":"• AI-generated structured metadata "}]},{"type":"paragraph","content":[{"type":"text","text":"• Human review before manually publishing to Framer"}]}]},"thumbnail":"https://image.mux.com/Zq6dzy4Hdi3gTx02v3gQOMK9K01J00ijD1lhz9NGt629R8/thumbnail.webp?time=20.333","targetDeleted":false,"owned":true,"actions":{"postId":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-27T04:39:03.097Z","latestAt":"2026-06-27T04:39:03.097Z"},{"id":"019efe7d-3cce-728a-a710-a548d6db15f1","type":"comment.liked","target":{"type":"comment","id":"019efde0-1a27-77ef-9121-c421658b79ba","preview":"Very clean and modern.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Very clean and modern."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019e9de3-9ef0-75d5-8eb6-96beee5942b7","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019efde0-1a27-77ef-9121-c421658b79ba"},"repost":null}},"context":{"type":"post","id":"019e9de3-9ef0-75d5-8eb6-96beee5942b7","preview":"MokuGraph","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JySQ0z0JcRzqGGyp8Iux/mokugraph-fCd2u3OYBSPfC8o6KG5YecIUcGCp7H","targetDeleted":false,"owned":true,"actions":{"postId":"019e9de3-9ef0-75d5-8eb6-96beee5942b7","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","slug":"mokujiro","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-25T11:14:40.970Z","latestAt":"2026-06-25T11:14:40.970Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:8ad4f2ed-f0a4-4d66-a8af-d4428fef994a:/unified/posts/?creator=8ad4f2ed-f0a4-4d66-a8af-d4428fef994a&with=reposts":[{"data":[{"id":"01a09a1f-6fdf-7714-987b-74e86b08240a","title":null,"body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Subtractive design"}]},{"type":"paragraph","content":[{"type":"text","text":"The graph in the hero of "},{"type":"text","text":"mokujiro.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://mokujiro.com","target":"_blank"}}]},{"type":"text","text":" is an iteration of MokuGraph, the d3 force graph component I sell for Framer. I rebuilt it around what the studio offers instead of every tool I use."}]},{"type":"paragraph","content":[{"type":"text","text":"What I changed for this site"}]},{"type":"paragraph","content":[{"type":"text","text":"- Positions are calculated, not simulated. A pure function puts the hub at the centre and spaces each ring evenly around it, ordered by which parent a node hangs off. The simulation only holds nodes on those targets, so the layout is identical on every load."}]},{"type":"paragraph","content":[{"type":"text","text":"- Rings are true circles sized to the shorter side of the frame, so the four arms match in every direction."}]},{"type":"paragraph","content":[{"type":"text","text":"- Four tiers, separated by size and opacity. Only the hub and the four entry points are meant to be read; the other 23 show the shape."}]},{"type":"paragraph","content":[{"type":"text","text":"- One link per entry point. A second link on one node made the rule invisible, so it came out."}]},{"type":"paragraph","content":[{"type":"text","text":"What MokuGraph already does, before you change anything"}]},{"type":"paragraph","content":[{"type":"text","text":"- Click a node and a drawer opens with the title, description, tags and related nodes, each clickable."}]},{"type":"paragraph","content":[{"type":"text","text":"- Side drawer on desktop, narrower on tablet, bottom sheet under 480px. You do not build that three times."}]},{"type":"paragraph","content":[{"type":"text","text":"- Touch is handled: pinch to zoom, tap to highlight, tap again to open."}]},{"type":"paragraph","content":[{"type":"text","text":"- Every visual property sits in the panel, including the physics: link distance, charge, connection strength, node size."}]},{"type":"paragraph","content":[{"type":"text","text":"- D3 is bundled. No runtime network requests, nothing to install."}]},{"type":"paragraph","content":[{"type":"text","text":"- 12 templates modelled on real AI architectures, or paste your own JSON."}]},{"type":"paragraph","content":[{"type":"text","text":"Two things that cost me a day"}]},{"type":"paragraph","content":[{"type":"text","text":"- Framer keeps every breakpoint in the DOM and hides the inactive ones, so the same elementId exists three times. Pick the one with a height before you scroll to it."}]},{"type":"paragraph","content":[{"type":"text","text":"- A stretched instance can hand your component the string \"100%\" as its width. Compare that to a number and the check fails silently."}]},{"type":"paragraph","content":[{"type":"text","text":"That is the part you are actually buying when you buy a component instead of building one."}]},{"type":"paragraph","content":[{"type":"text","text":"The graph in this post: "},{"type":"text","text":"mokujiro.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://mokujiro.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"The component: "},{"type":"text","text":"mokujiro.com/products/mokugraph","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://mokujiro.com/products/mokugraph","target":"_blank"}}]}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/01a09a21-e31d-76cb-bc48-58b7d05c6c27.jpg","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1920,"height":1392}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-13T09:38:30.785Z","createdAt":"2026-09-13T09:35:46.658Z","updatedAt":"2026-09-13T09:38:30.785Z"},{"id":"01a0751c-4537-74de-baef-6d6b0dadf672","title":null,"body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"mokujiro.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://mokujiro.com","target":"_blank"}}]},{"type":"text","text":" is now bilingual: English by default, Japanese at /ja."}]},{"type":"paragraph","content":[{"type":"text","text":"What I used in Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"- Localization add on for the ja locale. hreflang, canonicals and the sitemap per locale came for free."}]},{"type":"paragraph","content":[{"type":"text","text":"- CMS localization for case studies, products, lab and services. Text fields got Japanese, slugs and images stayed shared."}]},{"type":"paragraph","content":[{"type":"text","text":"- useLocaleInfo in code components. The language switcher, banner, hero graph and approach tabs carry an en / ja dictionary and switch themselves."}]},{"type":"paragraph","content":[{"type":"text","text":"- Custom Code for the typeface. IBM Plex Sans has no Japanese glyphs, so Noto Sans JP sits behind it as the fallback on Japanese pages."}]},{"type":"paragraph","content":[{"type":"text","text":"How the Japanese was done"}]},{"type":"paragraph","content":[{"type":"text","text":"- Step 1: AI translated the English into Japanese. This gave coverage, not quality."}]},{"type":"paragraph","content":[{"type":"text","text":"- Step 2: the AI read only the Japanese, worked out what each sentence was trying to say, then rewrote it to express that intent. The English was no longer in the loop."}]},{"type":"paragraph","content":[{"type":"text","text":"- Step 3: I reviewed everything. A lot still needed changing. Japanese readers notice immediately when Japanese is not native, and a literal translation reads as foreign even when it is correct."}]},{"type":"paragraph","content":[{"type":"text","text":"- Pushed through the Framer plugin API: about 780 strings, 24,000 English words. An audit script then compared every page in both languages before launch."}]},{"type":"paragraph","content":[{"type":"text","text":"Two things worth knowing"}]},{"type":"paragraph","content":[{"type":"text","text":"- Localise code components in code, not through the panel."}]},{"type":"paragraph","content":[{"type":"text","text":"- Framer sets html lang after hydration, so a CSS rule that depends on lang=\"ja\" needs a one line script before first paint."}]},{"type":"paragraph","content":[{"type":"text","text":"mokujiro.com/ja","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://mokujiro.com/ja","target":"_blank"}}]}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/01a0751d-c62b-720f-92fd-1322d4d55d90.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":1800}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-06T05:08:05.345Z","createdAt":"2026-09-06T05:06:22.139Z","updatedAt":"2026-09-06T05:08:05.345Z"},{"id":"01a02ebb-7df7-76fc-a38e-43002fbff396","title":null,"body":"

MokuToc is live: a minimal table of contents component built around progressive disclosure.

Readers need orientation constantly, but the full outline only occasionally. That tension became the starting point for the component.

On desktop, the structure is reduced to a quiet rail of thin dashes. It keeps a sense of position and progress visible, while the full list of headings only appears when the reader reaches for it.

On mobile, the same idea becomes a sticky current-section bar, with the wider structure available on tap.

Underneath, MokuToc reads the H2 and H3 headings already on the page, creates anchors, and follows the active section as the reader moves through the content.

The aim was to make navigation present enough to support orientation, but quiet enough for the content itself to remain the main experience.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MokuToc is live: a minimal table of contents component built around progressive disclosure."}]},{"type":"paragraph","content":[{"type":"text","text":"Readers need orientation constantly, but the full outline only occasionally. That tension became the starting point for the component."}]},{"type":"paragraph","content":[{"type":"text","text":"On desktop, the structure is reduced to a quiet rail of thin dashes. It keeps a sense of position and progress visible, while the full list of headings only appears when the reader reaches for it."}]},{"type":"paragraph","content":[{"type":"text","text":"On mobile, the same idea becomes a sticky current-section bar, with the wider structure available on tap."}]},{"type":"paragraph","content":[{"type":"text","text":"Underneath, MokuToc reads the H2 and H3 headings already on the page, creates anchors, and follows the active section as the reader moves through the content."}]},{"type":"paragraph","content":[{"type":"text","text":"The aim was to make navigation present enough to support orientation, but quiet enough for the content itself to remain the main experience."}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/9DoSI01of00eOzFZLXogUnn3us9hjPlbFG19jLEmoxwHI.m3u8","metadata":{"posterUrl":"https://image.mux.com/9DoSI01of00eOzFZLXogUnn3us9hjPlbFG19jLEmoxwHI/thumbnail.webp?time=2.792","aspectRatio":"16:9","duration":6.791667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-23T13:07:14.556Z","updatedAt":"2026-08-23T13:07:14.556Z"},{"id":"01a02cc4-d145-777f-a467-3aa12bde24d0","title":null,"body":"

MokuToc is out.

A minimal table of contents for long-form pages. On desktop, a slim dash rail expands into the full list on hover. On mobile, the current section stays visible in a sticky bar.

Connect it to your content layer and MokuToc automatically reads its H2 and H3 headings. Light and dark modes are built in.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MokuToc is out."}]},{"type":"paragraph","content":[{"type":"text","text":"A minimal table of contents for long-form pages. On desktop, a slim dash rail expands into the full list on hover. On mobile, the current section stays visible in a sticky bar."}]},{"type":"paragraph","content":[{"type":"text","text":"Connect it to your content layer and MokuToc automatically reads its H2 and H3 headings. Light and dark modes are built in."}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9HnNDTbQZbu4HdEWqgQt","resolved":true,"title":"MokuToc","body":"$54","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"MokuToc reads the headings that are already on your page."}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"It finds every H2 and H3, assigns anchors, and marks the current section as the reader scrolls. There is no list to maintain when the copy changes."}]},{"type":"customHeading","content":[{"type":"text","text":"Finds your article on its own"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Drop it on the page and it works: MokuToc takes the part of the page with the most headings. To limit it to one layer, type that name under Setup."}]},{"type":"customHeading","content":[{"type":"text","text":"Requirements"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"A code component for long-form pages. Your section titles need a text style tagged Heading 2 or Heading 3."}]},{"type":"customHeading","content":[{"type":"text","text":"Desktop: a rail, not a sidebar"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Thin dashes at the edge of your content. Hover or focus opens one popover with every heading title, the active heading in your accent colour."}]},{"type":"customHeading","content":[{"type":"text","text":"Mobile: a bar that gets out of the way"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Below your breakpoint the rail becomes a sticky bar naming the current section. Scroll down and it slides to the top of the screen, scroll up and it drops under your header."}]},{"type":"customHeading","content":[{"type":"text","text":"Tuned from the properties panel"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Rail geometry, popover size, header height, scroll margin, edge gap, mobile breakpoint and padding, plus 10 colours across light and dark sets. It picks the set by sampling the background it sits on, so it follows a theme toggle."}]},{"type":"customHeading","content":[{"type":"text","text":"Keyboard and screen reader"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Dashes are tabbable, focus opens the popover, Enter jumps, Escape closes. The mobile bar is a real button, panel entries carry aria-current, and reduced motion is respected."}]},{"type":"customHeading","content":[{"type":"text","text":"Nothing showing?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"If a page has no H2 or H3 headings, MokuToc says so beside the rail, on the canvas and in preview only. Readers never see it."}]},{"type":"customHeading","content":[{"type":"text","text":"Good to know"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"MokuToc reads H2 and H3, with an H2-only option. H1 and H4 are ignored. The Framer canvas shows a static three-dash placeholder; open Preview or publish to see the live rail."}]},{"type":"customHeading","content":[{"type":"text","text":"Refunds"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Full refund within 14 days. If something does not work as described, that window does not apply: email me and I will fix it or refund you. Your statutory consumer rights are unaffected."}]}]},"introduction":"Minimal table of contents","slug":"mokutoc","author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/01a02e08-0d8e-76e8-816d-102fa386f166.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1200,"height":900}}],"post":null,"createdAt":"2026-08-23T03:58:10.733Z","updatedAt":"2026-09-01T03:29:28.750Z","publishedAt":"2026-08-23T03:58:10.730Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://curious-view-359452.framer.app/","price":"15","paymentUrl":"https://mokujirostudio.lemonsqueezy.com/checkout/buy/4e3a1422-15c7-4d4b-849a-4cfe649ab942","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"NqK2d053BUzu4dsQM6O7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-23T03:58:11.269Z","updatedAt":"2026-08-23T03:58:11.269Z"},{"id":"01a005e5-d225-745d-a8f1-c7feb5a66784","title":null,"body":"

A change of direction for Mokujiro Studio.

We’ve renewed the site to better bring together our client work, experiments and the products we’re building in Framer, including MokuDocs and MokuGraph.

The practice continues to evolve across product design, complex systems, identity and products of our own.

mokujirodesign.space

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A change of direction for Mokujiro Studio."}]},{"type":"paragraph","content":[{"type":"text","text":"We’ve renewed the site to better bring together our client work, experiments and the products we’re building in Framer, including MokuDocs and MokuGraph."}]},{"type":"paragraph","content":[{"type":"text","text":"The practice continues to evolve across product design, complex systems, identity and products of our own."}]},{"type":"paragraph","content":[{"type":"text","text":"mokujirodesign.space","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://mokujirodesign.space","target":"_blank"}}]}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/YNlrvvtO021Q4KQ5ZuOgUO9FvCULiP6GGo4Jh3eMfIgE.m3u8","metadata":{"posterUrl":"https://image.mux.com/YNlrvvtO021Q4KQ5ZuOgUO9FvCULiP6GGo4Jh3eMfIgE/thumbnail.webp?time=8.333","aspectRatio":"16:9","duration":15.566667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-15T14:49:02.762Z","updatedAt":"2026-08-15T14:49:02.762Z"},{"id":"019fccca-3006-7648-be43-cd655f7fae24","title":null,"body":"

MokuDocs 2.0 is everything we’ve learned since—rebuilt from the ground up.

A more minimal, linear reading experience that keeps readers focused on the content, not the interface.

Documentation and changelogs now live in a single Framer project, powered entirely by Framer CMS. No plugins. No switching between systems.

Built for teams that ship products—from startups and established product teams to indie developers.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MokuDocs 2.0 is everything we’ve learned since—rebuilt from the ground up."}]},{"type":"paragraph","content":[{"type":"text","text":"A more minimal, linear reading experience that keeps readers focused on the content, not the interface."}]},{"type":"paragraph","content":[{"type":"text","text":"Documentation and changelogs now live in a single Framer project, powered entirely by Framer CMS. No plugins. No switching between systems."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for teams that ship products—from startups and established product teams to indie developers."}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/y00FCmDNZFFB4gN01KMZidVFyYZzNSmEeYq4ZfLtZnHBE.m3u8","metadata":{"posterUrl":"https://image.mux.com/y00FCmDNZFFB4gN01KMZidVFyYZzNSmEeYq4ZfLtZnHBE/thumbnail.webp?time=12.467","aspectRatio":"479:270","duration":41.309333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-08-04T12:49:42.403Z","createdAt":"2026-08-04T12:40:30.475Z","updatedAt":"2026-08-04T12:49:42.403Z"},{"id":"019fc181-bda1-7393-bbfa-ff6de5497d86","title":null,"body":"

Shipped MokuDocs 2.0. CMS-driven docs, changelog, and glossary in one Framer project, plus saved highlights so readers can save and revisit any passage. A full rebuild from 1.0, built for teams that don't want an engineer in the loop every time content changes.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Shipped MokuDocs 2.0. CMS-driven docs, changelog, and glossary in one Framer project, plus saved highlights so readers can save and revisit any passage. A full rebuild from 1.0, built for teams that don't want an engineer in the loop every time content changes."}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"70565","resolved":true,"title":"MokuDocs 2.0","body":"$55","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"MokuDocs 2.0 is a Framer-native documentation system for product teams.","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Manage docs, changelogs, glossary, search, bookmarks, and reader tools in one Framer project using native CMS. No separate docs platform or changelog tool."}]},{"type":"customHeading","content":[{"type":"text","text":"Requirements","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"A documentation site template, not a general business or marketing website. You edit it inside Framer, so basic Framer knowledge is required: duplicating a project, editing CMS items, and publishing a site."}]},{"type":"paragraph","content":[{"type":"text","text":"Not sure it fits? Email "},{"type":"text","text":"hello@mokujiro.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hello@mokujiro.com","target":"_blank"}}]},{"type":"text","text":" before you buy."}]},{"type":"customHeading","content":[{"type":"text","text":"CMS-driven documentation","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Docs and categories live in Framer CMS, not hardcoded pages. Add a page, assign a category, publish. No engineering release needed."}]},{"type":"customHeading","content":[{"type":"text","text":"Built-in changelog","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Release notes alongside your docs, with tag-based filtering."}]},{"type":"customHeading","content":[{"type":"text","text":"Inline glossary","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Terms become clickable definitions that open in a side panel, without leaving the page."}]},{"type":"customHeading","content":[{"type":"text","text":"Highlights, notes, and bookmarks","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Readers save passages, add notes, and return to them from a dedicated panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Search and navigation","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"A table of contents keeps long pages navigable, and Framer Site Search adds full-text search."}]},{"type":"paragraph","content":[{"type":"text","text":"Accessibility built in","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Keyboard navigation, focus states, and semantic structure, designed with WCAG AA in mind."}]},{"type":"customHeading","content":[{"type":"text","text":"Light and dark themes","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Supported out of the box."}]},{"type":"customHeading","content":[{"type":"text","text":"Good to know","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Site Search requires Framer Pro or higher. Site Search and theme switching work only on a published site, not in Framer Preview. The table of contents is desktop only, hidden below 810px. Code blocks use Framer's native code editor and have no copy button."}]},{"type":"customHeading","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"hello@mokujiro.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hello@mokujiro.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refunds","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Full refund within 14 days. Delivery is a Framer remix link that cannot be revoked, so a refund requires written confirmation that you have deleted the project and will not use or distribute the template or its assets."}]},{"type":"paragraph"}]},"introduction":"CMS-powered docs site template","slug":"mokudocs-2-0","author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/019fc248-1f53-7778-b10b-039255b71be3.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/019fc248-2b1a-7079-a39d-6fdf2bb72b52.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-02T08:05:32.790Z","updatedAt":"2026-08-23T01:27:45.778Z","publishedAt":"2026-08-02T08:05:32.786Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"79","paymentUrl":"https://mokujirostudio.lemonsqueezy.com/checkout/buy/273233b1-f2b8-421d-a6df-5918b184dfb7?discount=0","remixUrl":null,"previewUrl":"https://past-outcomes-951052.framer.app/","categories":[{"id":9,"name":"Changelog","slug":"changelog"},{"id":2,"name":"SaaS","slug":"saas"},{"id":10,"name":"Documentation","slug":"documentation"}],"styles":[{"id":236,"name":"Light","slug":"light"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":2,"name":"SaaS","slug":"saas"},"features":[{"id":7,"name":"Light & Dark Theme","slug":"light-dark-theme"},{"id":17,"name":"Sticky Scrolling","slug":"sticky-scrolling"},{"id":21,"name":"CMS","slug":"cms"},{"id":24,"name":"Site Search","slug":"site-search"},{"id":37,"name":"Code Components","slug":"code-components"}],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-02T08:05:33.217Z","updatedAt":"2026-08-02T08:05:33.217Z"},{"id":"019f165e-d3ac-76c8-8133-0def0c24f371","title":null,"body":"

Update to MokuPhoto's SeriesViewer.

View page

Added a new Development tab that visualises Lightroom edit data.

The edit values are extracted from each photo's XMP sidecar, stored in the CMS, and rendered as a visual meter instead of a list of numbers.

Seeing Exposure at +0.85 or Highlights at −64 doesn't mean much until you can see where they sit in the adjustment range. A simple visual indicator makes the data much easier to scan and compare.

Small feature, but it makes the metadata feel much more useful.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Update to MokuPhoto's SeriesViewer."}]},{"type":"paragraph","content":[{"type":"text","text":"View page","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://mokujirodesign.space/photography/23-ginkakuji-kyoto-2026","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Added a new "},{"type":"text","text":"Development","marks":[{"type":"bold"}]},{"type":"text","text":" tab that visualises Lightroom edit data."}]},{"type":"paragraph","content":[{"type":"text","text":"The edit values are extracted from each photo's XMP sidecar, stored in the CMS, and rendered as a visual meter instead of a list of numbers."}]},{"type":"paragraph","content":[{"type":"text","text":"Seeing Exposure at "},{"type":"text","text":"+0.85","marks":[{"type":"bold"}]},{"type":"text","text":" or Highlights at "},{"type":"text","text":"−64","marks":[{"type":"bold"}]},{"type":"text","text":" doesn't mean much until you can see where they sit in the adjustment range. A simple visual indicator makes the data much easier to scan and compare."}]},{"type":"paragraph","content":[{"type":"text","text":"Small feature, but it makes the metadata feel much more useful."}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/5rci8e77","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1971,"height":1747}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-06-30T02:38:52.033Z","createdAt":"2026-06-30T02:32:21.169Z","updatedAt":"2026-06-30T02:38:52.033Z"},{"id":"019f0ce6-ad99-705b-9da4-c87795aa9e7d","title":null,"body":"

MokuDocs - CMS Docs Template

As a UX Lead working on SaaS products, I've learnt how important well-structured documentation is for teams. MokuDocs is built to make documentation easier to manage and maintain, while creating a better reading experience.

CMS-driven sidebar navigation

Cmd + K search

Light & Dark Mode

Bookmark any page

Reading progress tracking

Table of contents

Copyable code blocks

Breadcrumbs

CMS-managed New & Updated tags

Reusable Doc Blocks powered by CMS

Filter by category

18+ sample docs included

Built with Framer CMS and ready to publish from day one.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MokuDocs - CMS Docs Template","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"As a UX Lead working on SaaS products, I've learnt how important well-structured documentation is for teams. MokuDocs is built to make documentation easier to manage and maintain, while creating a better reading experience."}]},{"type":"paragraph","content":[{"type":"text","text":"CMS-driven sidebar navigation"}]},{"type":"paragraph","content":[{"type":"text","text":"Cmd + K search"}]},{"type":"paragraph","content":[{"type":"text","text":"Light & Dark Mode"}]},{"type":"paragraph","content":[{"type":"text","text":"Bookmark any page"}]},{"type":"paragraph","content":[{"type":"text","text":"Reading progress tracking"}]},{"type":"paragraph","content":[{"type":"text","text":"Table of contents"}]},{"type":"paragraph","content":[{"type":"text","text":"Copyable code blocks"}]},{"type":"paragraph","content":[{"type":"text","text":"Breadcrumbs"}]},{"type":"paragraph","content":[{"type":"text","text":"CMS-managed New & Updated tags"}]},{"type":"paragraph","content":[{"type":"text","text":"Reusable Doc Blocks powered by CMS"}]},{"type":"paragraph","content":[{"type":"text","text":"Filter by category"}]},{"type":"paragraph","content":[{"type":"text","text":"18+ sample docs included"}]},{"type":"paragraph","content":[{"type":"text","text":"Built with Framer CMS and ready to publish from day one."}]},{"type":"paragraph"}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/nzIvsjj2URBXb020201m8TvneKApM02bj5kq1PMK7GOLA4I.m3u8","metadata":{"posterUrl":"https://image.mux.com/nzIvsjj2URBXb020201m8TvneKApM02bj5kq1PMK7GOLA4I/thumbnail.webp?time=17.533","aspectRatio":"16:9","duration":46.133333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":7,"edited":true,"editedAt":"2026-06-28T06:43:35.212Z","createdAt":"2026-06-28T06:24:32.157Z","updatedAt":"2026-06-28T06:43:35.212Z"},{"id":"019f0737-87d7-76a0-a8a9-9a52c25f9a11","title":null,"body":"

Exploring Framer beyond traditional websites.

https://mokujirodesign.space/photography

An AI-assisted photography publishing workflow combining Lightroom, Claude Code and Framer. The goal is to reduce repetitive publishing tasks, leaving more time behind the camera and developing photographs.

Workflow highlights:

• AI aperture estimation for vintage lenses

• AI-generated structured metadata

• Human review before manually publishing to Framer

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Exploring Framer beyond traditional websites."}]},{"type":"paragraph","content":[{"type":"text","text":"https://mokujirodesign.space/photography","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://mokujirodesign.space/photography","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"An AI-assisted photography publishing workflow combining Lightroom, Claude Code and Framer. The goal is to reduce repetitive publishing tasks, leaving more time behind the camera and developing photographs."}]},{"type":"paragraph","content":[{"type":"text","text":"Workflow highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• AI aperture estimation for vintage lenses "}]},{"type":"paragraph","content":[{"type":"text","text":"• AI-generated structured metadata "}]},{"type":"paragraph","content":[{"type":"text","text":"• Human review before manually publishing to Framer"}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/Zq6dzy4Hdi3gTx02v3gQOMK9K01J00ijD1lhz9NGt629R8.m3u8","metadata":{"posterUrl":"https://image.mux.com/Zq6dzy4Hdi3gTx02v3gQOMK9K01J00ijD1lhz9NGt629R8/thumbnail.webp?time=20.333","aspectRatio":"16:9","duration":32.933333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":3,"edited":true,"editedAt":"2026-06-27T04:50:34.728Z","createdAt":"2026-06-27T03:55:07.620Z","updatedAt":"2026-06-27T04:50:34.728Z"},{"id":"019e9de3-9ef0-75d5-8eb6-96beee5942b7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JySQ0z0JcRzqGGyp8Iux","resolved":true,"title":"MokuGraph","body":"$56","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"MokuGraph is an interactive AI architecture component for Framer."}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Visualise "},{"type":"text","text":"AI agents, RAG pipelines, MCP systems, knowledge graphs, and product ecosystems","marks":[{"type":"bold"}]},{"type":"text","text":" using ready-made templates or your own JSON data."}]},{"type":"customHeading","content":[{"type":"text","text":"12 built-in architecture templates"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI Agent Architecture "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-Agent Team "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"RAG Pipeline "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agentic RAG "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MCP Architecture "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI Customer Support "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI Sales Copilot "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI Memory System "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI Research Workflow "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI Coding Assistant "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Knowledge Graph "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Ecosystem"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Build your own graph with JSON"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Start with any template, customise it, or paste your own JSON into the "},{"type":"text","text":"Custom Graph Data","marks":[{"type":"bold"}]},{"type":"text","text":" property to generate a custom architecture map directly in Framer."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive force-directed graphs "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"12 templates based on real-world AI system patterns "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom JSON data support "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Force and radial layouts "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive across desktop, tablet, and mobile "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable colours, typography, nodes, edges, and physics "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional detail drawer for deeper exploration and documentation"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Ideal for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI startups "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS and product teams "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Developer documentation "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Technical blogs "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Architecture diagrams "}]},{"type":"paragraph","content":[{"type":"text","text":" Product and landing pages"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Turn complex AI systems into interactive architecture maps without drawing diagrams manually."}],"attrs":{"level":2}}]},"introduction":"AI Architecture Maps for Framer","slug":"mokugraph","author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JySQ0z0JcRzqGGyp8Iux/mokugraph-fCd2u3OYBSPfC8o6KG5YecIUcGCp7H","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-02T11:33:11.077Z","updatedAt":"2026-08-20T03:11:03.564Z","publishedAt":"2026-06-06T17:03:20.816Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gleaming-staple-756451.framer.app/","price":"19","paymentUrl":"https://mokujirostudio.lemonsqueezy.com/checkout/buy/4b69856a-6cb0-4a1b-854c-18ec2c0169ec","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"Ihh1ycfIPmRI5nIfIYWX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T17:03:20.816Z","updatedAt":"2026-06-06T17:03:20.816Z"},{"id":"019def76-3541-7177-84f0-0c9673c224a4","title":null,"body":"

Designed for teams. Built for readers.

MokuDocs helps teams manage documentation while giving readers features like bookmarks, reading progress, and search to make it easier to find and continue where they left off.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Designed for teams. Built for readers."}]},{"type":"paragraph","content":[{"type":"text","text":"MokuDocs helps teams manage documentation while giving readers features like bookmarks, reading progress, and search to make it easier to find and continue where they left off."}]}]},"author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"62395","resolved":true,"title":"MokuDocs","body":"$57","bodyJson":null,"introduction":"CMS Docs Template","slug":"mokudocs","author":{"framerUserId":"8ad4f2ed-f0a4-4d66-a8af-d4428fef994a","name":"Mokujiro Studio","slug":"mokujiro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398216/avatar-B2ihqfLhsfeIv0HgI6gPQeAb90eA4w.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/019fc250-374b-72f4-b242-ab284f25ccfe.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8ad4f2ed-f0a4-4d66-a8af-d4428fef994a/019fc250-443c-736b-a1cb-6d2b65fe16cd.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-11T12:45:34.901Z","updatedAt":"2026-08-02T11:51:20.657Z","publishedAt":"2026-05-03T20:09:54.753Z","featuredAt":null,"approvedAt":"2026-06-01T14:46:12.987Z","type":"template","attributes":{"price":"19","paymentUrl":"https://mokujirostudio.lemonsqueezy.com/checkout/buy/832ae874-1d4e-4927-a98e-cb59b7bd70c4","remixUrl":null,"previewUrl":"https://multiple-conference-284027.framer.app/","categories":[{"id":2,"name":"SaaS","slug":"saas"},{"id":10,"name":"Documentation","slug":"documentation"}],"styles":[{"id":247,"name":"Professional","slug":"professional"},{"id":109,"name":"Modern","slug":"modern"},{"id":111,"name":"Minimal","slug":"minimal"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":2,"name":"SaaS","slug":"saas"},"features":[{"id":7,"name":"Light & Dark Theme","slug":"light-dark-theme"},{"id":9,"name":"Overlays & Modals","slug":"overlays-modals"},{"id":17,"name":"Sticky Scrolling","slug":"sticky-scrolling"},{"id":21,"name":"CMS","slug":"cms"},{"id":23,"name":"Rich Media","slug":"rich-media"},{"id":24,"name":"Site Search","slug":"site-search"},{"id":32,"name":"Layout Templates","slug":"layout-templates"},{"id":37,"name":"Code Components","slug":"code-components"}],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":3,"edited":true,"editedAt":"2026-06-28T07:45:34.611Z","createdAt":"2026-05-03T20:09:54.753Z","updatedAt":"2026-06-28T07:45:34.611Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L58"}]