Visual Block Coding Engine for Discord Bots

Snap blocks like Scratch,
run live in Discord

A zero-dependency pure TypeScript block IDE with magnetic snapping physics. Assemble visual blocks to generate clean discord.js v14 code instantly.

Open Web Studio Browse Templates

SnapBot Studio Workspace

200+ Blocks Built-In

Assembled Block Sequence

When slash command /ping received

Reply to interaction: "Pong! Responded in 0.05s"

Create new Embed [Title: Bot Status] [Desc: All systems operational]

Send embed to current channel

Real-Time Generated discord.js v14 TypeScript

client.on('interactionCreate', async (interaction) => {
  if (!interaction.isChatInputCommand()) return;
  if (interaction.commandName === 'ping') {
    await interaction.reply({
      content: 'Pong! Responded in 0.05s.'
    });
    const currentEmbed = new EmbedBuilder()
      .setTitle('Bot Status')
      .setDescription('All systems operational')
      .setTimestamp();
    await interaction.channel?.send({ embeds: [currentEmbed] });
  }
});

Modular Architecture

Built cleanly in TypeScript across 4 dedicated engine packages.

@snapbot/core

Block data models, magnetic vector snapping physics, serialization, and undo/redo history.

@snapbot/blocks

Over 200 standard Discord blocks: events, messages, embeds, control loops, and moderation.

@snapbot/compiler

Analyzes visual AST trees and transpiles directly into production-ready discord.js code.

@snapbot/runtime