Tools for the Next Generation of Software Developers

Story update: Introducing Replit Projects July 16, 2024

Matt Legrand
Staff Product Designer, Replit
2023—2024

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

While demand for software development and transformation of every economy sector by software increases exponentially, the number of people who can build, deploy, and maintain software remains comparatively low. Software engineers are now the greatest chokepoint for growth.

Most of these people are concentrated into a few specific demographics, meaning that all the world's software is conceived, built, and delivered by a relatively small cadre who are geographically, culturally, and financially detached from the billions of users who rely on their choices. This inequitable state of affairs broadens the technology gap for anyone who doesn't belong to these demographics, or isn't able to make unilateral digital product architectures function for their specific purposes.

This gap presents a massive opportunity for platforms like Replit to democratize software development, making it more accessible and collaborative for the next generation of developers.

Replit, Inc.

Cloud development platform, in-browser IDE, and artificial developer intelligence

replit.com

Replit jailbreaks software development by lowering the barriers to creativity and productivity.

There are roughly 30 million software developers in the world. As all businesses eventually converge on becoming software businesses, Replit's mission is to unlock the next billion developers via a new emergent class of software creator: citizen developers.

Replit is an online integrated development environment that allows citizen developers to write, run, and share code directly from their browser. It supports a wide range of programming languages, robust templating and configuration tools, and artificial developer intelligence; making building and deploying software accessible to both beginners and experienced engineers.

With Replit, launching a new software applications that would have been impossible just a few years ago can now be achieved in minutes. The high barriers to entry for adopting new languages or entire technology stacks have deterred even experienced software engineers from pursuing new projects. Replit is changing that by enabling developers to build and deploy software faster, and spend more time in a state of flow, regardless of their technical expertise.

Tackling the core workpace and AI tooling

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

In addition to an online IDE, the workspace contains a suite of tools used to build, deploy, and manage projects, like Deployments, Authentication, Secrets, and database tools. I designed and developed new workspace tools, such as the Dependencies tool. The Dependencies tool simplifies project configuration with Nix OS and automates the detection and installation of binaries, runtimes, and language servers for Node.js, Python, and Go projects.

Replit AI provides developer intelligence and pair programming capabilities, enabling developers to build and deploy faster. I created powerful ways of interacting with AI in the workspace and using code intelligence to power productivity with mechanisms like retrieval augmentation, and agentic workflows across codebases.

Replit Teams

Teams are a purpose-built suite of tools, entirely in the browser, to help enterprises and startups move faster and ship higher quality software from idea to production.

Enabling teams to work together on Replit bridges a huge gap in collaborative software development using Replit, but to do this, we needed to build several fundamental new product architectures: Robust version control; preview deployments; role-based access control, multiplayer AI, and so on.

Overview demo of Replit Teams features, demonstrating remote collaboration, product iteration with natural language, version control, and deployment.

Replit Projects

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

A Project is a set of connected, forkable Repls that reside in a Replit Team space for better collaborative development and versioning. Within each Project, users can clone and fork a Repl to work on a feature in isolation, and merge their changes back to the main or source Repl when ready, mirroring a typical trunk-based workflow used in local-first development models with a remote source of truth.

Since building software on Replit is fundamentally different than local-first development, the Project version control tools exist alongside traditional git-based version control. This enables developers of various levels of experience to work collaboratively and even with the toolchain of their choice. Replit users can view all ongoing development in one place, using only the Project tool, rather than the Git tool.

Internally, we often discussed how there have been no major shakeups in the software engineering workflow since the creation of git. With Replit's realtime collaboration capability, we believed we have an opportunity change this.

One of the big challenges involved with creating native tools for version control and project management is finding a way to create a better version of git without accidentally reinventing git. Replit users can collaborate live within a Repl, which isn't possible in a local-first development model. This changes the typical etiquette of code review and outside edits. Typically, a developer would request a review, and reviewers would make changes in their own branches rather than live-editing within the review instance. But when collaboration on code is happening live, within the same editing environment on a cloud computer, the decorum and time involved with code review can be collapsed dramatically.

We developed new version control systems that felt native to Replit's real-time collaboration model, as well as adopted popular practices like trunk-based development and stacking, all while maintaining mutual compatibility with developers using their own IDEs and git tools.

Every Project is organized around having a main Repl that is the source of truth. In this example Project, "AnvilWebServer" is the main Repl. Each team member has their own fork where they can work, e.g. "MattLegrand-07-03" is a fork off of the main Repl. Users begin by forking any Repl in the organization, where they are prompted to convert it into a Project:

By choosing “Fork & start a Project”, the Repl is converted into the "main" Repl for the Project, and the user is automatically moved to a new fork where they can begin working on a feature. After opening a fork in the workspace, the Project tool opens and informs you that you have no changes from the main Repl yet. Modifying the fork results in changes being reflected in the Project tool:

Replit AI

Matt Legrand & Maya Gao

Building a design system for AI tools on Replit

Previously, Replit AI tools had existed as a simplistic chatbot and inline editing tool, known as Ghostwriter. We wanted to create a more robust set of tools that had the capability to interact with the Replit workspace. For example, one of the most common workflows with an AI chat is to ask for code generations, which then require the user to copy and paste that code into the editor. We wanted Replit AI to be capable of general workspace awareness across workspace tools: ability to make inline edits, multiturn instruction, visibility of the Shell and Deployments, and so on.

We developed a design system unique to Replit AI to support these workspace functions; expanding the Replit AI Chat to support multiple threaded history; codeblocks and snippets from the Shell and Deployment logs; error diagnosis; the ability to run commands; and more.

A few examples of the Replit AI chat tool, demonstrating threaded history, connected code, inline function calling to the workspace, actions, and context management tools.

Defining hierarchies for context

Code Intelligence, in the context of AI programming tools, is the ability of an AI to understand and answer questions about an existing codebase. Typically, we ask language models trained on code a variety of permutations of the question: "What is this?" or "What does this do?" or "What is the type of this?". One of the more challenging aspects of refining an LLM's generations is defining (or letting the user ergonomically define) what "this" represents in these kinds of queries. "This" could refer to my current working file, a folder I've selected, or my entire project. It could optionally be a request for additional, outside context, such as another project or external documentation.

"Context" can be defined as how the scope of a prompt is managed. Techiques for delivering this context usually involve inferring, or letting the user define, segments of text based on one of the desired scopes for "this". These segments can be gathered through late retrieval or simply dumped to the model in the form of a hidden pre-prompt.

While we can infer some contexts automatically (for example, when the current working file is open in the workspace), I wanted to define a clear rubric for categorizing types of context and create easy access points for users to attach and manage their context and tasks.

I chose @ for nouns and / for actions as primary keyboard triggers, with corresponding UI items in the chat input. @ is used for quick, inline mentions that append a single context item. / is used to describe a task to be performed, like "explain" or "modify". These can be combined into expressions that quickly define the user's scope and intent to the model.

Assemble & Run Jobs

Early agentic workflow experiments included this demo of generative UI in the Replit AI chat. By stringing together several prompts in the background, and interpreting returned lists as UI rather than raw text, we're able to present recommendations as tasks that the user can perform in sequence. This results in promising, low-lift methods for accelerating agent-based development and natural language programming.

Prototype of the Replit workspace with a demonstration of Replit AI using new foundational archetypes: Assemble Jobs and Inline Generation. By transforming language model generations into structured data, the tool is able to concatenate and perform transformations sequentially on the user's behalf.

Figma-to-Replit plugin

Matt Legrand & Devin Halladay

Replit Labs is a space for creative hacker projects and experiments; some of them ultimately become part of the core platform. As a Hack Week project, Devin and I built the Figma-to-Replit plugin, which we subsequently released to the general community.

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

Unlike the code generated by some tools that provide simple html approximation with inline style attributes, the export is high-quality and well-organized. Figma components are packaged to corresponding React components; styles are built and compiled using Lightning CSS. For most web projects, this codebase is a valuable starting point and saves large amounts of static frontend work.

With this tool, you can generate a Repl directly from your Figma design, and instantly share a static React site with your team. You can use Replit AI to add functionality and tweak your design before deploying to production. This integration is all about accelerating the prototyping process and ultimately boosting developer productivity.

Live demo of the Replit Figma plugin used to export a "Twitter clone" design from Figma, leveraging component and auto layout features to prescribe component structure and responsive layout properties.

We debuted the Figma-to-Replit plugin in a live demo as part of a prototyping workshop at the a16z SF office. The plugin hit top 10 among Figma's trending plugins.

Figma-to-Replit is one of the first plugins to support Dev Mode, and was featured in Figma's blog post covering Dev Mode plugins that generate code. We leverage Dev Mode to make it easier to inspect figma frames, preview the project structure generated at export, debug responsivity, and include or exclude files and assets.

The plugin is available now. Install it here. If you're using the plugin, I'd love to hear your feedback.