> ## Documentation Index
> Fetch the complete documentation index at: https://docs.modulex.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog

> The ModuleX blog: deep dives, guides, and announcements from the team. This page is an index into the blog on the ModuleX website — read the latest posts and learn where to look for the why behind each release.

export const MediaEmbed = ({id, type = 'screenshot', caption = '', ext, ratio = '16 / 9'}) => {
  const isVideo = type === 'video' || type === 'app_video';
  const resolvedExt = ext || (isVideo ? 'mp4' : type === 'screenshot' ? 'webp' : 'svg');
  const src = 'https://media.modulex.dev/' + id + '.' + resolvedExt;
  const [status, setStatus] = useState('loading');
  const [isDev, setIsDev] = useState(false);
  const [inView, setInView] = useState(false);
  const boxRef = useRef(null);
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const h = window.location.hostname;
    setIsDev(h === 'localhost' || h === '127.0.0.1' || h.endsWith('.mintlify.app'));
  }, []);
  useEffect(() => {
    if (inView) return;
    if (typeof IntersectionObserver === 'undefined') {
      setInView(true);
      return;
    }
    const el = boxRef.current;
    if (!el) return;
    const io = new IntersectionObserver(entries => {
      if (entries.some(e => e.isIntersecting)) {
        setInView(true);
        io.disconnect();
      }
    }, {
      rootMargin: '300px'
    });
    io.observe(el);
    return () => io.disconnect();
  }, [inView]);
  if (status === 'missing') {
    if (!isDev) return null;
    return <div style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      gap: '0.4rem',
      padding: '1rem 1.25rem',
      margin: '1.25rem 0',
      width: '100%',
      aspectRatio: ratio,
      boxSizing: 'border-box',
      border: '1px dashed rgba(128,128,128,0.45)',
      borderRadius: '0.75rem',
      background: 'rgba(128,128,128,0.06)',
      color: 'currentColor',
      fontSize: '0.85rem',
      lineHeight: 1.45
    }}>
        <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '0.5rem',
      opacity: 0.75
    }}>
          <span aria-hidden="true">🎬</span>
          <code style={{
      fontSize: '0.75rem'
    }}>{id}</code>
          <span style={{
      fontSize: '0.65rem',
      textTransform: 'uppercase',
      letterSpacing: '0.04em',
      padding: '0.1rem 0.4rem',
      borderRadius: '0.4rem',
      background: 'rgba(128,128,128,0.18)'
    }}>
            {type}
          </span>
        </div>
        <div style={{
      opacity: 0.9
    }}>{caption || 'Media not uploaded yet.'}</div>
        <div style={{
      fontSize: '0.7rem',
      opacity: 0.5
    }}>
          Upload to R2 as <code>{id}.{resolvedExt}</code> — preview only, hidden in production.
        </div>
      </div>;
  }
  const mediaStyle = {
    display: status === 'loaded' ? 'block' : 'none',
    width: '100%',
    height: 'auto',
    borderRadius: '0.75rem'
  };
  const media = isVideo ? <video src={inView ? src : undefined} autoPlay loop muted playsInline preload="metadata" onLoadedData={() => setStatus('loaded')} onError={() => setStatus('missing')} style={mediaStyle} /> : <img src={inView ? src : undefined} alt={caption} onLoad={() => setStatus('loaded')} onError={() => setStatus('missing')} style={mediaStyle} />;
  return <figure style={{
    margin: '1.25rem 0'
  }}>
      <div ref={boxRef} style={status === 'loaded' ? {
    width: '100%'
  } : {
    width: '100%',
    aspectRatio: ratio,
    borderRadius: '0.75rem',
    background: 'rgba(128,128,128,0.06)'
  }}>
        {media}
      </div>
      {status === 'loaded' && caption ? <figcaption style={{
    marginTop: '0.5rem',
    textAlign: 'center',
    fontSize: '0.85rem',
    opacity: 0.7
  }}>
          {caption}
        </figcaption> : null}
    </figure>;
};

The blog is where the ModuleX team explains the thinking behind the product: why a feature exists, how to get the most out of it, and what changed in a larger release. The changelog tells you *what* changed; the blog tells you the *story*.

Posts live on the ModuleX website, not in these docs. This page is an index — it points you to the blog and explains how it is organized, so you always know where to look.

<Card title="Read the latest posts" icon="newspaper" href="https://modulex.dev/blog" horizontal>
  The full, up-to-date list of posts lives on the ModuleX website. New posts appear there first.
</Card>

<MediaEmbed id="MX-MEDIA-4490" type="screenshot" caption={"The ModuleX blog index on the website, showing the grid of recent posts."} />

## What you will find here

The blog covers the topics that do not fit a reference page — the reasoning, the trade-offs, and the walkthroughs.

<CardGroup cols={2}>
  <Card title="Release stories" icon="rocket">
    The why behind larger releases. When a feature is big enough to need context, the blog explains the problem it solves and how to use it well.
  </Card>

  <Card title="Deep dives" icon="microscope">
    Longer reads on how a part of ModuleX works under the hood — useful when you want more than the reference gives you.
  </Card>

  <Card title="Guides and patterns" icon="map">
    Practical walkthroughs and reusable patterns. For step-by-step how-tos that live in the docs, see the guides linked at the bottom of this page.
  </Card>

  <Card title="Announcements" icon="megaphone">
    Company and product news worth a longer note than a changelog line.
  </Card>
</CardGroup>

## How the blog is organized

Every post on the website follows the same shape, so the index is easy to scan.

<CardGroup cols={2}>
  <Card title="Title and excerpt" icon="heading">
    Each post opens with a title and a one-line excerpt, so you can tell at a glance whether it is for you.
  </Card>

  <Card title="Date and reading time" icon="clock">
    Posts are listed newest first, each with its publish date and an estimated reading time.
  </Card>

  <Card title="Author" icon="user">
    Every post names the person or team who wrote it.
  </Card>

  <Card title="Tags" icon="tags">
    Posts can carry tags that group related reads together. Use them to find more on a topic you care about.
  </Card>
</CardGroup>

<Note>
  This page intentionally does not list individual posts. The website is the single source of truth for what is published, so the live list never drifts out of date here. Open [the blog](https://modulex.dev/blog) for the current posts.
</Note>

## Latest posts

The most recent posts always appear on the website blog. This docs page links out rather than mirroring the list, so you are never reading a stale copy.

<Card title="Browse all posts on modulex.dev" icon="arrow-up-right" href="https://modulex.dev/blog" horizontal>
  See every published post, newest first, with covers, excerpts, dates, and tags.
</Card>

## Subscribe and follow

<Note>
  **A blog feed (RSS/Atom) and an email subscription are not confirmed yet — TBD.** The ModuleX website does not currently publish a verified blog feed or newsletter sign-up that these docs can point to. Until one is confirmed, the reliable way to see new posts is to check the website blog. This note will be updated with a feed or subscribe link once it exists.
</Note>

To stay current in the meantime:

<Steps>
  <Step title="Bookmark the blog">
    Keep [`modulex.dev/blog`](https://modulex.dev/blog) handy and check back for new posts.
  </Step>

  <Step title="Watch the changelog">
    For a dated, scannable record of what shipped, follow the [changelog](/reference/changelog). It links out to a blog post when a release has a longer story behind it.
  </Step>

  <Step title="Check system status">
    For live availability and incidents — rather than feature news — see [system status and health](/reference/status).
  </Step>
</Steps>

## Related reading in the docs

The blog is the narrative layer. For the canonical, always-current details, start in the docs.

<CardGroup cols={2}>
  <Card title="Changelog" icon="list" href="/reference/changelog">
    What changed in ModuleX and when, newest first, with breaking changes called out. The companion to the blog.
  </Card>

  <Card title="Guides and reference" icon="compass" href="/guides/run-a-workflow">
    Task-oriented how-tos in the docs — run a workflow, connect an integration, build a knowledge base, schedule a workflow.
  </Card>

  <Card title="Power using ModuleX" icon="wand-sparkles" href="/power-using/overview">
    Patterns and tips that combine features to solve real problems — the docs counterpart to the blog's deep dives.
  </Card>

  <Card title="Glossary" icon="book-a" href="/reference/glossary">
    If a post uses a term you do not recognize, the glossary is the canonical reference for ModuleX terminology.
  </Card>
</CardGroup>