Tools for the next generation of software developers

Matt Legrand, Staff Product Designer, Replit

July 16, 2024•8 min read

AI Developer Tools Product Design Collaboration

Today, comparatively few people build software the rest of the world uses.

While demand for software developmentRonald Fernandes, Ashish Arora, and Jai Asundi, “Supply and Demand for Software Developers in India,” H. John Heinz III School of Public Policy & Management, Carnegie Mellon University and transformation of every economy sector by software increases exponentiallyMarc Andreessen, “Why Software Is Eating the World,” Andreessen Horowitz, August 20, 2011, the number of people who can build, deploy, and maintain software remains low. Software engineers are now the greatest chokepoint for growth.

Most of these people are concentrated into a few specific demographics“Software Engineer Demographics and Statistics [2025],” Zippia, updated January 8, 2025, meaning all the world’s software is conceived, built, and delivered by a small cadre geographically, culturally, and financially detached from the billions who rely on their choices. This broadens the technology gap for anyone who doesn’t belong to these demographicsKat Ely, “The World Is Designed for Men,” HH Design (Medium), September 8, 2015, or can’t make unilateral digital tool architecturesUnilateral Digital Tool Architectures, Applied Sciences function for their purposes.

This gap is Replit’s opportunity.

Replit jailbreaks software development.

There are roughly 30 million software developers in the worldLionel Sujay Vailshery, “Developers population worldwide 2018-2024,” Statista, August 21, 2023 (updated November 26, 2024). Replit’s mission is to unlock the next billion via a new class of software creator: citizen developers“Citizen Developer,” Gartner IT Glossary.

Replit is an online IDE that lets you write, run, and share code directly from your browser. It supports multiple programming languages, templating and configuration tools, and AI developer intelligence.

Projects that would have been impossible a few years ago can now launch in minutes. High barriers to adopting new languages or technology stacks have deterred even experienced engineers from pursuing new ideas. Replit changes that by enabling developers to build and deploy faster, spending more time in a state of flowSaima Ritonummi, Valtteri Siitonen, Markus Salo, Henri Pirkkalainen, and Anu Sivunen, “Flow Experience in Software Engineering,” Proceedings of the 31st ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering (ESEC/FSE ‘23), December 3–9, 2023.

Core workspace and AI tooling

I worked across two domains at Replit: the core workspace and Replit AI.

The workspace contains tools to build, deploy, and manage projects: Deployments, Authentication, Secrets, and databases. I designed and developed new workspace tools like Dependencies, which simplifies project configuration with Nix OS and automates detection and installation of binaries, runtimes, and language servers for Node.js, Python, and Go.

Replit AI provides developer intelligence and pair programming capabilities. I created ways to interact with AI in the workspace using code intelligence, retrieval augmentation, and agentic workflows across codebases.

Replit Teams

Real-time collaboration tools like Google Docs and Figma feel natural. Software development tools don’t. Replit Teams enables users to collaborate and ship from a shared environment, with both real-time and asynchronous options.

Teams is a suite of tools, entirely in the browser, to help enterprises and startups ship faster from idea to production.

To enable this, we built several fundamental product architectures: version control, preview deployments, role-based access control, and multiplayer AI.

Replit Projects

Matt Legrand, Omar Abdul-Rahim, Aman Mathur, Mike Hadley, Ted Summer, Szymon Kaliski

A Project is a set of connected, forkable Repls in a Team space. Users can fork a Repl to work on a feature in isolation, then merge changes back to the main Repl when ready, mirroring trunk-based workflows.

Since building on Replit is fundamentally different than local-first development, Project version control exists alongside traditional git. Developers of all experience levels can collaborate with the toolchain of their choice. Replit users can view all ongoing development in one place using the Project tool.

There have been no major shakeups in the software engineering workflow since git. With Replit’s realtime collaboration, we saw an opportunity to change this.

The challenge: create better version control without reinventing git. Replit users can collaborate live within a Repl, which isn’t possible in local-first development. This changes code review etiquette. Typically, reviewers make changes in their own branches rather than live-editing. But when collaboration happens live in the same environment, code review can be dramatically faster.

We developed version control that felt native to Replit’s real-time model while adopting practices like trunk-based development and stacking, all while maintaining compatibility with developers using their own IDEs and git tools.

Every Project has a main Repl as the source of truth. In this example, AnvilWebServer is the main Repl. Each team member has their own fork, like MattLegrand-07-03. Users begin by forking any Repl in the organization and are prompted to convert it into a Project.

Choosing “Fork & start a Project” converts the Repl into the main Repl and moves the user to a new fork. The Project tool opens and shows no changes from main yet. Modifications to the fork are reflected in the Project tool.

Replit AI

Matt Legrand & Maya Gao

Building a design system for AI tools

Previously, Replit AI was a simple chatbot and inline editing tool called Ghostwriter. We wanted tools that could interact with the workspace. The most common AI chat workflow requires copying and pasting code into the editor. We wanted Replit AI to have workspace awareness: inline edits, multiturn instruction, visibility of Shell and Deployments.

We developed a design system for Replit AI supporting threaded history, codeblocks and snippets from Shell and Deployment logs, error diagnosis, and command execution.

Defining hierarchies for context

Code Intelligence is the ability of an AI to understand and answer questions about a codebase. We ask language models: “What is this?” or “What does this do?” One of the more challenging aspects is defining what this represents. It could be the current file, a folder, the entire project, or external documentation.

“Context” is how the scope of a prompt is managed. Techniques for delivering context involve inferring or letting the user define segments of text based on desired scopes. These segments can be gathered through late retrieval or dumped to the model as a pre-prompt.

While we can infer some contexts automatically, I wanted to define a clear rubric for categorizing context types and create easy access points for users to manage them.

I chose @ for nouns and / for actions as primary keyboard triggers. @ appends a single context item. / describes a task like “explain” or “modify”. These combine into expressions that define scope and intent.

Assemble & Run Jobs

Early agentic workflow experiments included generative UI in the Replit AI chat. By stringing together prompts and interpreting returned lists as UI rather than raw text, we presented recommendations as tasks users could perform in sequence.

Figma-to-Replit plugin

Matt Legrand & Devin Halladay

Replit Labs is a space for creative hacker projects and experiments. As a Hack Week project, Devin and I built the Figma-to-Replit plugin and released it to the community.

After selecting a frame in Figma, the plugin generates a React project and opens a new repl. The project can be built and deployed in seconds. The goal: streamline the process from designing in Figma to prototyping with code, generating visually accurate, responsive code from designs.

Unlike tools that provide simple HTML approximation with inline styles, the export is high-quality and well-organized. Figma components become React components; styles are built and compiled using Lightning CSS. For most web projects, this is a valuable starting point that saves significant frontend work.

Generate a Repl directly from your Figma design and instantly share a static React site. Use Replit AI to add functionality and tweak your design before deploying to production.

Debut

We showcased the plugin in a live demo at a prototyping workshop at the a16z SF office. It hit top 10 among Figma’s trending plugins.

Figma-to-Replit was one of the first plugins to support Dev Mode and was featured in Figma’s blog post on Dev Mode plugins that generate code. We leverage Dev Mode to inspect frames, preview project structure, debug responsivity, and include or exclude files and assets.

Install it here.