automodvisual

AutoMod Visual Builder lets subreddit moderators create and manage AutoModerator rules through a visual interface — no YAML required.

Comment

Project Story — AutoMod Visual Builder

About the project

AutoMod Visual Builder makes AutoModerator rule creation accessible to every subreddit moderator by replacing manual YAML editing with a concise visual editor. Moderators build rules using tap-to-cycle selectors for field (title, body, URL, domain, author, flair, post type), operator (contains, matches, starts-with, equals, etc.), and a regular text input for match values. Actions (remove, approve, report, lock, ban, leave comment, set flair) are configured inline. The app stores rules per-subreddit in Devvit Redis, validates them server-side, and generates fully valid AutoModerator YAML for preview and copy-to-clipboard.

App listing URL: https://www.reddit.com/r/AutoModVisualBuilder

https://developers.reddit.com/apps/automodvisual

Reddit usernames: u/Dependent-Trifle7897

What inspired us

Many communities lack AutoMod rules because moderators find YAML intimidating. Large subs with rotating teams suffer from single-person rule bottlenecks. We wanted a tool that:

  • Lowers the technical entry barrier for new mods.
  • Makes rules discoverable and reviewable (visual → YAML).
  • Encourages safe, collaborative moderation by making rule creation straightforward.

What we built

  • A compact React 19 frontend that runs inside Reddit as a WebView (src/client/game.html / src/client/splash.html).
  • A serverless backend using Devvit + Hono and a small tRPC surface for saves, previews, and validation (src/server).
  • A YAML generator and linter that emits readable, valid AutoModerator YAML and surfaces validation messages to users.
  • Ten starter templates (spam links, new-account flags, self-promo filters, hate-speech removal, welcome comments, auto-flair, brigade detection, etc.) to help moderators get started quickly.

How we built it

We split the UX into three focused areas:

  • Dashboard: rule list, enable/disable toggles, and bulk actions.
  • Editor: visual rule builder with cycleable selectors and inline action editors.
  • YAML Preview: syntax-highlighted output with copy and validation.

Rules are serialized to a compact JSON model in Redis keyed by subreddit. The backend performs server-side validation, then a deterministic generator produces the final YAML for preview.

Tech highlights

  • Frontend: React 19 + Tailwind, bundled with Vite.
  • Backend: Devvit web + Hono, storing per-subreddit state in scoped Devvit Redis.
  • Type-safety: small shared types in src/shared and tRPC endpoints for end-to-end safety.

Performance & correctness

YAML generation is linear in the number of rules and their components. If there are $n$ rules and rule $i$ has $c_i$ conditions and $a_i$ actions, an upper-bound for the number of YAML lines $L$ is:

$$ L = \sum_{i=1}^n (c_i + a_i + k) $$

where $k$ is a small constant accounting for per-rule metadata. This keeps preview generation fast for normal subreddit workloads and makes latency predictable.

What we learned

  • Platform UX matters: keep the inline view minimal and move heavy features to the expanded view to reduce load time.
  • Visual-to-declarative translation reveals edge cases: operator semantics and nested condition logic required careful mapping and user-facing validation.
  • Server-side linting is invaluable: catching YAML edge cases before users copy it to a wiki reduces moderator friction and support load.

Challenges

  • Mapping visually simple actions to verbose YAML constructs while preserving expressiveness and readability.
  • Handling operator and condition precedence so generated YAML matches user intent in complex rules.
  • Balancing fast initial load (splash) with a richer, heavier editor (expanded) inside the constraints of the WebView.

What's next

  • Add import/export so subreddits can sync with wiki AutoMod pages.
  • Add collaborative metadata (who last edited, timestamps).
  • Expand templates with community-contributed samples and usage analytics.

Acknowledgements

Built with Devvit web, Hono, React 19, Tailwind; inspired by moderator workflows and feedback from early playtesters. Special thanks to moderators who helped test templates and edge-case rules.

Built With

  • clsx
  • devvit-cli
  • devvit-redis
  • devvit-web
  • eslint
  • hono
  • javascript
  • node.js
  • prettier
  • react-19
  • reddit-webview
  • tailwind-css-4
  • tailwind-merge
  • trpc
  • tsc-(typescript-compiler)
  • typescript
  • vite
  • vitest
Share this project:

Updates