DEV Community: Ramu Narasinga

Turn your workflow into a step-by-step guide with Mimik.

Ramu Narasinga — Fri, 25 Sep 2026 15:30:00 +0000

In this article, we review Mimik tool. You will learn:

What is Mimik?
WXT, Next-gen web extension framework.

What is Mimik?

Mimik watches your tabs and writes the guide — annotated screenshots, numbered steps, ready to export. It never phones home.

How it works?

Pin it

Install from the Chrome Web Store and pin Mimik to your toolbar. Click once to start recording.

Work normally

Do the thing you’d do anyway. Mimik captures every click and keystroke and builds a step-by-step guide in the side panel.

Export anywhere

Ship a polished guide as Markdown, PDF, HTML, or a shareable link — all rendered locally. Your machine, your call.

Install the Mimik chrome extension

WXT, Next-gen web extension framework.

Well, I found the file named, wxt.config.ts and also checked the package.json and found these below scripts:

...
"scripts": {
    "dev": "wxt",
    "dev:firefox": "wxt -b firefox --mv3",
    "build": "wxt build",
    "build:firefox": "wxt build -b firefox --mv3",
    "zip": "wxt zip",
    "zip:firefox": "wxt zip -b firefox --mv3",
...

This led to search for wxt and that’s how I found this WXT web extenstion framework.

WXT is an open source tool that makes web extension development faster than ever before.

Learn more about WXT.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

I spent 3+ years studying OSS codebases and wrote 400+ articles on what makes the production-grade. Now I'm putting that into practice differently - instead of writing every fix myself, I run coding agents that do it.

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

How does context-mode save the context?

Ramu Narasinga — Tue, 22 Sep 2026 15:30:00 +0000

In this article, we review how the context is saved in context-mode. You will learn:

What is context-mode?
How is context saved?

What is context-mode?

Context mode is an MCP plugin that sandboxes tool output and indexes it into a local FTS5 store. Your AI coding agent searches that store instead of re-sending raw bytes every turn. 17 adapters. 586,000+ developers. Runs entirely on your machine.

I wrote a detailed article about what is Context mode.

How is context saved?

I use deepwiki.com to understand open source codebase. So I opened the to understand open source codebase. So I opened the and asked this question:

How does context-mode save the context?

It gave an answer with references to the actual code snippets and files.

Context-mode achieves the “315 KB → 5.4 KB” saving by never letting raw tool output reach the model’s context window — it executes code in an isolated sandbox subprocess and only returns what the code explicitly prints (console.log, print, etc.), while the full payload either stays inside the sandbox or is persisted to an on-disk FTS5 index for on-demand retrieval.

Well, what’s a FTS5 index? FTS5 (Full-Text Search 5) is a SQLite virtual table module for full-text search. In context-mode, it’s the underlying engine that powers the knowledge base used by ctx_index/ctx_search to store and query indexed content without keeping raw bytes in the model's context. I will write about this in one of upcoming articles.

The concepts provided by Deepwiki are:

Sandboxed execution
Intent-driven filtering for large outputs
Persistent storage instead of raw dump
Response tracking/savings accounting
Concrete numeric evidence
Enforcement layer

Learn more about how context is saved.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

Build durable agents with eve.

Ramu Narasinga — Fri, 18 Sep 2026 16:00:00 +0000

In this article, we review eve.dev. You will learn:

What is Eve?
Architecture
Usage Example

What is Eve?

eve is a filesystem-first framework for durable backend agents on Vercel.

You author an agent as a directory on disk. The directory is the contract - markdown for the parts a human should read like a spec, TypeScript for the parts that benefit from real types and runtime behavior.

The framework is called eve. The published npm package is eve. The CLI binary is eve.

Directory structure can be as shown below:

my-agent/
├── package.json
├── tsconfig.json
└── agent/
    ├── agent.ts           # additive runtime config (model, name, build, compaction, …)
    ├── instructions.md    # always-on instructions prompt
    ├── tools/             # typed executable integrations
    ├── skills/            # optional named procedures the model can load on demand
    ├── hooks/             # lifecycle and stream-event subscribers
    ├── channels/          # message ingress and delivery (HTTP, Slack, …)
    ├── connections/       # external MCP server connections
    ├── sandbox/           # the agent's single sandbox (optional override)
    ├── workspace/         # files seeded into the sandbox on each session
    ├── subagents/         # specialist child agents (reuse `defineAgent`)
    ├── schedules/         # recurring jobs
    └── lib/               # shared authored code imported by other files

Learn more about Eve.

Architecture

You do not need this section to author an eve agent - it documents the public HTTP protocol contracts so eve composes predictably with other systems.

eve's internal split is:

the channel normalizes inbound transport, applies auth and delivery policy, and owns channel-local addresses
the harness does one unit of AI work and returns { session, next }
the runtime persists state, follows next, streams events, and owns workflow primitives (start(), resumeHook(), createHook(), getWritable())

The public HTTP protocol exposes one immutable identifier: sessionId. Create a session explicitly, then use that ID for follow-up messages, controls, streaming, and inspection. Channel-local addresses remain behind authored channel APIs.

This is from Architecture section in packages/eve.

Usage Example

I picked this example from packages/eve README.

agent/instructions.md

You are a weather-focused assistant. Be concise, accurate, and explicit when you use a tool.

agent/tools/get_weather.ts

import { defineTool } from "eve/tools";
import { z } from "zod";

export default defineTool({
  description: "Get the current weather for a city.",
  inputSchema: z.object({
    city: z.string(),
  }),
  async execute(input) {
    return {
      city: input.city,
      condition: "Sunny",
      temperatureF: 72,
    };
  },
});

agent/agent.ts

import { defineAgent } from "eve";

export default defineAgent({
  model: "openai/gpt-5.4-mini",
});

and then you would do this:

npx eve@latest init my-agent

eve init writes a new agent with eve's default model. Pass --model openai/gpt-5.5 to choose another AI Gateway model, --reasoning high to set a reasoning effort, or --channel-web-nextjs to add the Web Chat application. It installs dependencies, initializes Git, and starts the development server. When it finds a supported coding-agent REPL, the handoff menu can open that REPL instead or exit. Targeting an existing project directory (eve init .) adds the agent files and missing dependencies instead. It does not create a Vercel project or deploy the agent.

Learn more about deploying agents created using Eve.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

Optimize context window for AI agents using Context-Mode.

Ramu Narasinga — Fri, 18 Sep 2026 15:30:00 +0000

In this article, we review Context-Mode. You will learn:

What is Context-Mode?
The problem
How Context Mode solves it

What is Context-Mode?

Context-Mode is the other half of the context problem — for developers and for engineering orgs. An MCP plugin that keeps raw data out of the LLM context window. A Platform that surfaces what your team is doing with the saved tokens. Same engine, two surfaces, your choice.

The problem

I read thru the context-mode README and found this problem statement which is accurate description of what goes into context window:

Every MCP tool call dumps raw data into your context window. A Playwright snapshot costs 56 KB. Twenty GitHub issues cost 59 KB. One access log — 45 KB. After 30 minutes, 40% of your context is gone. And when the agent compacts the conversation to free space, it forgets which files it was editing, what tasks are in progress, and what you last asked for. On top of that, the agent wastes output tokens on filler, pleasantries, and verbose explanations — burning context from both sides.

I mean tool call raw data can be heavy. I do use the Caveman, an open-source tool and skill designed for Caveman that strips filler words, pleasantries, and unnecessary phrasing from AI coding assistants like Claude Code to cut token usage by 65% to 75%. I configured it in my VS Code + Claude Code.

How Context Mode solves it

Context-Mode describes 4 sides of the problem:

Context Saving
Session Continuity
Think in Code
No prose-style enforcement

I did not quite understand what “Think in Code” meant here:

// Before: 47 × Read() = 700 KB.  After: 1 × ctx_execute() = 3.6 KB.
ctx_execute("javascript", `
  const files = fs.readdirSync('src').filter(f => f.endsWith('.ts'));
  files.forEach(f => console.log(f + ': ' + fs.readFileSync('src/'+f,'utf8').split('\\n').length + ' lines'));
`);

I mean you would want the contents of the file considered in the context window, not just the file names because file name alone does not tell you the entire story right?

Learn more about Context Mode.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

Effect, a TypeScript library for building production-grade software.

Ramu Narasinga — Mon, 14 Sep 2026 16:00:00 +0000

In this article, we review Effect. You will learn:

What is Effect?
Usage examples.

What is Effect?

Effect is a TypeScript library for building production-grade software: typed error handling, structured concurrency, resource safety, and observability, all from one composable core.

Why Effect? I read thru this Welcome section in the Effect docs and it describes that TypeScript is excellent at describing your data, but it says almost nothing about your programs: a function’s signature doesn’t tell you what can fail, what dependencies it needs, or whether it can be safely retried, timed out, or interrupted. Effect closes that gap with a single building block: the Effect type, a value that fully describes a program, including its success value, its possible errors, and its requirements.

Learn more about how Effect is useful.

Usage examples

Follow the installation steps provided. In the learning path section, Creating effects explains how you can define the success and failure cases in a function.

Traditionally, we would do the following to handle errors in a TS function:

// Type signature doesn't show possible exceptions
const divide = (a: number, b: number): number => {
  if (b === 0) {
    throw new Error("Cannot divide by zero")
  }
  return a / b
}

divide(4, 2) // => 2

but this function’s type signature do not indicate that they can throw exceptions. Now with Effect, you could rewrite this division function as shown below:

import { Effect } from "effect"

const divide = (a: number, b: number): Effect.Effect<number, Error> =>
  b === 0
    ? Effect.fail(new Error("Cannot divide by zero"))
    : Effect.succeed(a / b)

Effect.runSync(divide(4, 2)) // => 2

In this example, the divide function indicates in its return type Effect that the operation can either succeed with a number or fail with an Error.

      ┌─── Produces a value of type number
         │       ┌─── Fails with an Error
         ▼       ▼
Effect<number, Error>

Below is another example, simulating a user retrieval operation:

import { Effect } from "effect"

// Define a User type
interface User {
  readonly id: number
  readonly name: string
}

// A mocked function to simulate fetching a user from a database
const getUser = (userId: number): Effect.Effect<User, Error> => {
  // Normally, you would access a database or API here, but we'll mock it
  const userDatabase: Record<number, User> = {
    1: { id: 1, name: "John Doe" },
    2: { id: 2, name: "Jane Smith" },
  }

  // Check if the user exists in our "database" and return appropriately
  const user = userDatabase[userId]
  if (user) {
    return Effect.succeed(user)
  } else {
    return Effect.fail(new Error("User not found"))
  }
}

// When executed, this will successfully return the user with id 1
const exampleUserEffect = getUser(1)

Effect.runSync(exampleUserEffect).name // => "John Doe"

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

.nix files in Openscreen codebase.

Ramu Narasinga — Sat, 12 Sep 2026 15:30:00 +0000

In this article, we review .nix files in the openscreen codebase. You will learn:

What is Openscreen?
What is .nix file?
How is this used in Openscreen?

What is Openscreen?

Using Openscreen, record your screen, ship a demo. Free and open-source, GPU-accelerated, no watermarks, no subscriptions. Windows, macOS, Linux. Actively maintained.

Features

Record a specific window, or your whole screen.
Record microphone and system audio.
Webcam overlay with picture-in-picture, drag-to-position, mirroring, and shape options.
Auto or manual zooms with adjustable depth, duration, easing, and pixel-precise position; auto-zoom follows your cursor as you work.
Custom cursor size, smoothing, and click effects, with cursor themes and post-recording path smoothing.

and much more, check out Core Features on Openscreen README.

What is .nix file?

I found a nix folder in the Openscreen codebase.

.nix file is a plain text file that contains a declarative code expression written in the Nix language to build software packages, manage system settings, or create reproducible development environments. At this point, you would find out what a Nix language is right? So I visited nix.dev.

Nix.dev

Nix is a tool for people who both need computers to do exactly as intended, repeatably, far into the future, and who are familiar with command line interfaces and plain text editors.

What can you do with Nix?

With the Nix ecosystem, you can:

Reproducible development environments.
Easy installation of software over URLs.
Easy transfer of software environments between computers.
Declarative specification of Linux machines.
Reproducible integration testing using virtual machines.
Avoidance of version conflicts with already installed software.
Installing software from source code.
Transparent build caching using binary caches.
Strong support for software auditability
First-class cross compilation support.
Remote builds.
Remote deployments.
Atomic upgrades and rollbacks.

How is this used in Openscreen?

So we want to find out what nix folder is for. I went deepwiki.com and searched for Openscreen and pasted the prompt shown in the above image. Deepwiki indexes public, open source repository so you can chat with any codebase and try to understand the concepts and architecture of open source repos.

This was the response — https://deepwiki.com/search/how-is-the-nix-folder-used-in_76b443b2-8f39-4129-a6d7-e738c9d0ec18?mode=fast

The nix/ folder provides a declarative, reproducible Linux packaging path for OpenScreen using Nix Flakes, as an alternative to the electron-builder-based build system build-and-packaging.md:1-3 .

How nix is wired together in Openscreen?

flake.nix calls each derivation via pkgs.callPackage, injecting ffmpeg-lgpl into compositor-view and pipewire-helper, then feeds all three native outputs into nix/package.nix flake.nix:39-48 . The final openscreen binary is a makeWrapper-generated script around system electron, with env vars (OPENSCREEN_FFMPEG_PATH, OPENSCREEN_COMPOSITOR_VIEW_NODE, OPENSCREEN_LINUX_CURSOR_HELPER_EXE, OPENSCREEN_WHISPER_SERVER_EXE) that let the app's runtime resolution logic (e.g. audioPeaks.ts, pipeWireCursorRecordingSession.ts) find these native binaries without relying on the electron-builder resource layout package.nix:94-123 .

Learn more about Nix usage in Openscreen.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

Gitleaks, an open-source secret scanner.

Ramu Narasinga — Mon, 07 Sep 2026 15:30:00 +0000

In this article, we review Gitleak. You will learn:

What is Gitleaks?
Gitleaks configuration in awslabs/aidlc-workflows repo.

What is Gitleaks?

Gitleaks an open-source secret scanner for git repositories, files, and directories. With over 16 million docker downloads, 17k GitHub stars, 9 million GitHub Downloads, thousands of weekly clones, and over 700k homebrew installs, gitleaks is the most trusted open-source secret scanner among security professionals, enterprises, and developers. Gitleaks is maintained by Zach Rice.

Gitleaks-Action is the official Gitleaks GitHub Action. You can use it to automatically run a gitleaks scan on all your team's pull requests and commits, or run on-demand scans. For a short demonstration of Gitleaks-Action, you can check out this GIF or read about the features in the redme. If you are scanning repos that belong to a GitHub personal account, then no license key is required. If you are scanning repos that belong to a GitHub organization account, then you'll have to obtain a free license below.

Below is a usage example I found on gitleaks-actions.

name: gitleaks
on:
  pull_request:
  push:
  workflow_dispatch:
  schedule:
    - cron: "0 4 * * *" # run once a day at 4 AM
jobs:
  scan:
    name: gitleaks
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
        with:
          fetch-depth: 0
      - uses: gitleaks/gitleaks-action@v3
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITLEAKS_LICENSE: ${{ secrets.GITLEAKS_LICENSE }} # Only required for Organizations, not personal accounts.

Gitleaks configuration in awslabs/aidlc-workflows repo.

I found this file - .gitleaks.toml in awslabs/aidlc-workflows repo and is defined as shown below:

# Gitleaks configuration
# https://github.com/gitleaks/gitleaks#configuration

title = "aidlc-workflows gitleaks config"

[extend]
# Extend the default ruleset (don't replace it)
useDefault = true

[allowlist]
description = "Global allowlist"
paths = [
    '''\.gitleaks-baseline\.json$''',
    '''uv\.lock$''',
]

The comment mentions https://github.com/gitleaks/gitleaks#configuration where you can learn about the available configuration options in this toml file.

There is also another file named — .gitleaks-baseline.json this was mentioned in the paths and has 212 LOC at the time of writing this code.

I took a closer look at json content in this baseline file and it looks like below:

[
 {
  "RuleID": "aws-access-token",
  "Description": "Identified a pattern that may indicate AWS credentials, risking unauthorized cloud resource access and data breaches on AWS platforms.",
  "StartLine": 340,
  "EndLine": 340,
  "StartColumn": 22,
  "EndColumn": 41,
  "Match": "AKIAABCDEFGHIJKLMNOP",
  "Secret": "AKIAABCDEFGHIJKLMNOP",
  "File": "tests/unit/t313-plugin-doctor-checks.test.ts",
  "SymlinkFile": "",
  "Commit": "8e365e4e13b356c8057bc265beefb95d8dc3f15b",
  "Link": "https://github.com/awslabs/aidlc-workflows/blob/8e365e4e13b356c8057bc265beefb95d8dc3f15b/tests/unit/t313-plugin-doctor-checks.test.ts#L340",
  "Entropy": 3.8841836,
  "Author": "Arden Packeer",
  "Email": "2102737+apackeer@users.noreply.github.com",
  "Date": "2026-08-23T10:24:01Z",
  "Message": "feat: plugin-extensible /aidlc --doctor checks via tools/\u003cplugin\u003e-doctor.ts (2.6.61) (#797)\n\nAn enabled plugin may ship an optional tools/\u003cplugin\u003e-doctor.ts check script; doctor discovers it selection-aware, spawns it via bun (no shell) with AIDLC_PROJECT_DIR/AIDLC_HARNESS_DIR/AIDLC_PLUGIN_NAME, and folds its JSON {checks:[{pass,label,fix?,severity?}]} into the report. Error-severity failures fail doctor (exit 1); advisory failures stay visible without changing the exit code; timeouts, spawn errors, bad JSON, and malformed entries become bounded fail-loud rows (50-row/256KiB/300-char caps).\n\nDisabled plugins stay inert. Findings flow into --doctor --export via the existing adaptLegacyResult merge. test-pro ships the reference script.\n\nCloses #796",
  "Tags": [],
  "Fingerprint": "8e365e4e13b356c8057bc265beefb95d8dc3f15b:tests/unit/t313-plugin-doctor-checks.test.ts:aws-access-token:340"
 },

well, I needed to understand what baseline meant here, so I took a closer look at README and found this section — Creating a baseline.

When scanning large repositories or repositories with a long history, it can be convenient to use a baseline. When using a baseline, gitleaks will ignore any old findings that are present in the baseline. A baseline can be any gitleaks report. To create a gitleaks report, run gitleaks with the --report-path parameter. — Source.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

Openship, a self-hosted deployment platform.

Ramu Narasinga — Wed, 02 Sep 2026 15:30:00 +0000

In this article, we review Openship. You will learn:

What is Openship?
Features

What is Openship?

Openship is an Open-source, self-hostable deployment platform with built-in CI/CD. Point it at a repo - it builds, ships, routes, and TLS-terminates your app. Drive it from a desktop app, web dashboard, or CLI.

I checked their docs and there are few important things worth mentioning about how you run Openship itself. There's three ways:

You are solo and run one machine, no ops:

It is recommended to run the Openship as a Desktop app. You can download Openship Desktop app Your apps run on a server that ssh over

You are a team/part of team

It is recommended to self host a server and spinup Openship.

Don't want to self-host?

Openship provides cloud alternative, starts from $10 per month at the time of writing this article, check their pricing.

Learn more about Openship.

Features

Openship handles everything between your code and production.

Deploy
Run
Connect
Data
Manage

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

What is Tauri?

Ramu Narasinga — Tue, 01 Sep 2026 15:30:00 +0000

In this article, we review Tauri. You will learn:

What is Tauri?
Tauri usage in worldmonitor repo

What is Tauri?

Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. Developers can integrate any frontend framework that compiles to HTML, JavaScript, and CSS for building their user experience while leveraging languages such as Rust, Swift, and Kotlin for backend logic when needed.

You can create a tauri app using the below command:

pnpm create tauri-app

after you create your project, you can check the project structure.

Why Tauri?

Tauri has 3 main advantages for developers to build upon:

Secure foundation for building apps
Smaller bundle size by using the system’s native webview
Flexibility for developers to use any frontend and bindings for multiple languages

Tauri usage in worldmonitor repo

I noticed the folder src-tauri, if you remember project structure generated using create-tauri-app, it looks like below:

javascript
.
├── package.json
├── index.html
├── src/
│   ├── main.js
├── src-tauri/
│   ├── Cargo.toml
│   ├── Cargo.lock
│   ├── build.rs
│   ├── tauri.conf.json
│   ├── src/
│   │   ├── main.rs
│   │   └── lib.rs
│   ├── icons/
│   │   ├── icon.png
│   │   ├── icon.icns
│   │   └── icon.ico
│   └── capabilities/
│       └── default.json

Tauri provides flexible architecture, any frontend framework is compatible with Tauri. That said, you might be wondering what Worldmonitor is.

Worldmonitor

I copied this info from Worldmonitor github.

Real-time global intelligence dashboard. AI-powered news aggregation, geopolitical monitoring, and infrastructure tracking in a unified situational awareness interface

What It Does

Curated news feeds across global and regional categories, AI-synthesized into briefs
Dual map engine — 3D globe (globe.gl) and WebGL flat map (deck.gl) with a shared map-layer catalog
Panel inventory — concrete panel implementations across specialized variants
Cross-stream correlation — military, economic, disaster, and escalation signal convergence
Country Instability Index (CII) — server-authoritative CII v8 stress scoring for the Tier-1 registry
Finance radar — stock exchanges, commodities, crypto, and a market composite
Local AI — run everything with Ollama, no API keys required
Site variants from a single codebase (world, tech, finance, commodity, happy, energy)
Native desktop app (Tauri 2) for macOS, Windows, and Linux
Multilingual UI with native-language feeds and RTL support

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

Vue Flow usage in n8n codebase.

Ramu Narasinga — Fri, 28 Aug 2026 15:30:00 +0000

In this article, we review Vue Flow usage in n8n. You will learn:

What is Vue Flow?
How Vue Flow is used to build workflows in n8n.
Press enter or click to view image in full size

What is Vue Flow?

Vue Flow is a bridge to the world of interactive flowcharts and graphs, empowering you to bring dynamism and interactivity to flowcharts and graphic representations. Whether it’s crafting personal diagrams, generating dynamic editors, or anything else your imagination conjures up, Vue Flow is your creative companion.

Vue Flow makes it effortless to customize and extend basic functionalities by allowing the integration of your own bespoke nodes and edges. Additional components such as Background, Minimap, and Controls further enrich the interface, transforming your creations into engaging platforms.

Key Features

Seamless setup
Customizable
Efficient and Responsive
Utilities and Composability
Additional Components
Reliable

Check out the Getting Started guide.

How Vue Flow is used to build workflows in n8n.

I found the Vue Flow imports in the Canvas.vue file. n8n uses Vue in its frontend/editor-ui package.

// in Canvas.vue
import { 
  getRectOfNodes, 
  MarkerType, 
  PanelPosition, 
  useVueFlow, 
  VueFlow } from '@vue-flow/core';

Below is a code snippet I picked from the getting started guide:

<VueFlow :nodes="nodes" :edges="edges">
  <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
  <template #node-special="specialNodeProps">
    <SpecialNode v-bind="specialNodeProps" />
  </template>

  <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
  <template #edge-special="specialEdgeProps">
    <SpecialEdge v-bind="specialEdgeProps" />
  </template>
</VueFlow>

VueFlow component expects nodes and edges. Now that we understand the basics of how nodes and edges are configured, let’s review the VueFlow definition in the Canvas.vue:

<VueFlow
  :id="id"
  :nodes="vueFlowNodes"
  :edges="connections"
  :class="classes"
  :style="selectionBoxStyle"
  :apply-changes="false"
  :connection-line-options="{ markerEnd: MarkerType.ArrowClosed }"
  :connection-radius="60"
....

For one, this VueFlow component in n8n has a lot of props. You can see them in Canvas.vue L1771.

Below is a how Nodes are defined:

<template #node-canvas-node="nodeProps">
   <slot name="node" v-bind="{ nodeProps }">
    <Node
     v-bind="nodeProps"
     :data="nodeDataById[nodeProps.id]"
     :selected="nodeProps.selected && !fullySelectedGroupMemberIds.has(nodeProps.id)"
     :read-only="readOnly"
     :can-execute="canExecute"
     :event-bus="eventBus"
     :hovered="nodesHoveredById[nodeProps.id]"
...

I only copied a part of the entire component declaration and similarly edges are defined as shown below:

<template #edge-canvas-edge="edgeProps">
   <slot name="edge" v-bind="{ edgeProps, arrowHeadMarkerId }">
    <Edge
     v-bind="edgeProps"
     :marker-end="`url(#${arrowHeadMarkerId})`"
     :read-only="readOnly"
     :hovered="edgesHoveredById[edgeProps.id]"
     :bring-to-front="edgesBringToFrontById[edgeProps.id]"
     @add="onClickConnectionAdd"
     @delete="onDeleteConnection"
     @update:label:hovered="onUpdateEdgeLabelHovered(edgeProps.id, $event)"
    />
   </slot>
</template>

Nodes and Edges components are defined in the elements folder.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

concurrently usage in n8n codebase.

Ramu Narasinga — Mon, 24 Aug 2026 15:30:00 +0000

In this article, we review Concurrently. You will learn:

What is Concurrently?
Concurrently in n8n codebase.

What is Concurrently?

Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better.

The usual way to run multiple commands concurrently is npm run watch-js & npm run watch-css. That's fine but it's hard to keep on track of different outputs. Also if one process fails, others still keep running and you won't even notice the difference.

Features:

Cross platform (including Windows)
Output is easy to follow with prefixes
With --kill-others switch, all commands are killed if one dies

Learn more about concurrently.

Concurrently in n8n codebase.

I found concurrently in n8n codebase at packages/cli/package.json.

{
  "name": "n8n",
  "version": "2.36.0",
  "description": "n8n Workflow Automation Tool",
  "main": "dist/index",
  "types": "dist/index.d.ts",
  "scripts": {
  ...
  "dev": "concurrently -k -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold\" \"pnpm run watch\" \"nodemon --delay 1\"",
  }
}

Why concurrently? Like its explained above, concurrently provides outputs with prefixes when you have multiple scripts combined in a single script and is cross platform. I faced this issue in a project, on windows machine, where the dev script had & and as a result, it failed to run.

There are other scripts too where this concurrently is used in the same package.json file:

swift
...
"dev:worker": "concurrently -k -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold\" \"pnpm run watch\" \"nodemon worker\"",
"dev:webhook": "concurrently -k -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold\" \"pnpm run watch\" \"nodemon webhook\"",
...

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com

References:

useEditorContext composable in n8n codebase.

Ramu Narasinga — Fri, 21 Aug 2026 15:30:00 +0000

In this article, we review useEditorContext in n8n codebase. You will learn:

Composables in Vue
useEditorContext as composable in n8n.

Composables in Vue

In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

When building frontend applications, we often need to reuse logic for common tasks. For example, we may need to format dates in many places, so we extract a reusable function for that. This formatter function encapsulates stateless logic: it takes some input and immediately returns expected output. There are many libraries out there for reusing stateless logic - for example lodash and date-fns, which you may have heard of.

By contrast, stateful logic involves managing state that changes over time. A simple example would be tracking the current position of the mouse on a page. In real-world scenarios, it could also be more complex logic such as touch gestures or connection status to a database.

This is just like React Hooks.

Learn more about Composables.

useEditorContext as composable in n8n.

Now that we understand what a composable is in Vue.js, btw, n8n editor-ui is written in Vue, let's understand how useEditorContext is used.

Below is a comment I picked from useEditorContext.ts file.

/**
 * Per-editor host overrides for the current editor context.
 *
 * Editor hosts (e.g. the Instance AI artifact preview) scope their embedded
 * editor by providing `EditorEnabledFeaturesKey` - the capabilities the host
 * supersedes. AI features can only be restricted: an explicit `false` turns one
 * off, while omitted (or `true`) features fall back to their store values.
 * `readOnly` is a direct flag - `true` forces the canvas read-only. When no host
 * provides the key, AI features fall back to their store values and the canvas
 * is editable (`readOnly` is `false`).
 * `executionSuccessToasts` / `executionErrorToasts` are direct flags too - each
 * `true` (the default) shows that class of execution result toast; an explicit
 * `false` from the host suppresses it.
 */
export function useEditorContext() {

This comment explains what it does - Per-editor host overrides for the current editor context.

Below is the entire useEditorContext definition:

export function useEditorContext() {
 const settings = useSettingsStore();
 const enabledFeatures = inject(EditorEnabledFeaturesKey, null);

 // A host can only restrict: an explicit `false` supersedes the feature;
 // omitted (or `true`) falls back to the store gating below.
 const isEnabledByHost = (feature: EditorFeature): boolean =>
  enabledFeatures?.value?.[feature] !== false;

 const enabledInStore = (feature: EditorFeature): boolean => {
  switch (feature) {
   case 'aiAssistant':
    return settings.isAiAssistantEnabled === true;
   case 'aiBuilder':
    return settings.isAiBuilderEnabled === true;
   case 'askAi':
    return settings.isAskAiEnabled === true;
   case 'instanceAi':
    // Mirrors useInstanceAiAvailable() (the feature-layer gate) with
    // app-layer primitives so this base composable imports no feature:
    // the module is active, enabled, ready (or admin-fixable), and the
    // user may message Instance AI.
    return (
     settings.isModuleActive('instance-ai') &&
     settings.moduleSettings['instance-ai']?.enabled !== false &&
     (settings.moduleSettings['instance-ai']?.setupCompleted === true ||
      hasPermission(['rbac'], { rbac: { scope: 'instanceAi:manage' } })) &&
     hasPermission(['rbac'], { rbac: { scope: 'instanceAi:message' } })
    );
  }
 };

 const featureEnabled = (feature: EditorFeature) =>
  computed(() => enabledInStore(feature) && isEnabledByHost(feature));

 return {
  aiAssistant: featureEnabled('aiAssistant'),
  aiBuilder: featureEnabled('aiBuilder'),
  askAi: featureEnabled('askAi'),
  instanceAi: featureEnabled('instanceAi'),
  readOnly: computed(() => enabledFeatures?.value?.readOnly === true),
  expandGroups: computed(() => enabledFeatures?.value?.expandGroups),
  executionButtonType: computed(() => enabledFeatures?.value?.executionButtonType ?? 'primary'),
  executionSuccessToasts: computed(
   () => enabledFeatures?.value?.executionSuccessToasts !== false,
  ),
  executionErrorToasts: computed(() => enabledFeatures?.value?.executionErrorToasts !== false),
 };
}

This uses settings from useSettingsStore - Here Pinia is used. Pinia is a state management library.

I think this returns what features are enabled in the editor context, because this just returns an object containing features as keys and values being boolean depending on "feature enabled".

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

How it works? Register your machine as a Runtime, point it at your repo. Agents pick up issues. write the fix, open the PR. You just review, they execute.

Build your coding agents and get more work done in less time at thinkthroo.com