Sunil Kumar Dash

for Composio

Posted on Feb 13

🤯12 must-know open-source tools to ace modern web development 🔥

#webdev #programming #javascript #ai

We're living in an exciting time. A lot of crazy improvements are happening in the web space.

But sometimes, it can be hard to understand what to use to get the best out of your page.

So, I made a curated list of repositories that you can use now and improve your website in terms of speed, AI capabilities, and more.

1. Composio 👑: The AI integration platform

If you're building anything with AI and LLMs, Composio is inevitable. LLMs are limited and cannot access external platforms, and Composio lets your AI apps and agents access over 250 apps like GitHub, Linear, Jira, Gmail, etc.

Working with it is very easy.

npm install composio-core openai

Connect your GitHub Account

import { Composio } from "composio-core";

const client = new Composio({ apiKey: "<your-api-key>" });

const entity = await client.getEntity("Jessica");
const connection = await entity.initiateConnection({appName: 'github'});

console.log(`Open this URL to authenticate: ${connection.redirectUrl}`);

Initialize Composio and OpenAI

import { OpenAI } from "openai";
import { OpenAIToolSet } from "composio-core";

const openai_client = new OpenAI();
const composio_toolset = new OpenAIToolSet();

Fetch GitHub actions and pass them to the LLM

const tools = await composio_toolset.getTools({
actions: ["github_star_a_repository_for_the_authenticated_user"]
});

const instruction = "Star the repo composiohq/composio on GitHub";

const response = await openai_client.chat.completions.create({
model: "gpt-4o",
messages: [{ role: "user", content: instruction }],
tools: tools,
tool_choice: "auto",
});

Execute the tool calls.

const result = await composio_toolset.handleToolCall(response);
console.log(result);

The documentation provides more on Composio, its work, and important concepts for making capable production-ready agents.

Star the Composio repository ⭐

2. Podman: Daemonless container engine

If you're tired of Docker’s reliance on a central daemon and you want a more secure, rootless approach, Podman is a great alternative that offers the same container capabilities without the overhead of a continuously running service.

Podman offers Docker-like commands without the daemon, enhancing security and flexibility. It supports rootless containers, making it well-suited for multi-user or production environments.

# Installation (macOS)
brew install podman

# Usage Example
podman run -dt -p 8080:80 nginx
podman ps
podman build -t myapp .

Seamlessly switch from Docker commands while enjoying a more secure approach to containerization.

Star the Podman repository ⭐

3. Turborepo: High-performance build system for JS/TS codebases

Perhaps the best library for your monorepo.

It brings smart caching and parallel execution to the mono repo, cutting build times dramatically. It supports large teams working on multiple packages in one repo, ensuring smoother CI/CD pipelines. It is also from Vercel.

# Installation
npm install turbo --save-dev

A small usage example.

// Usage Example (turbo.json)
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "inputs": ["src/**/*.tsx", "test/**/*.tsx"]
    }
  }
}

Achieve faster incremental builds and cleaner mono repo management.

Star the Turborepo repository ⭐

4. Vite: Next-generation frontend tooling

Vite offers a near-instant dev server powered by native ES modules, optimizing your bundling process. It’s an excellent fit for React, Vue, and Svelte projects demanding rapid feedback loops.

# Installation
npm create vite@latest my-app

Usage Example (vite.config.js)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        }
      }
    }
  }
})

Enjoy a smooth development experience with instant HMR and easy configuration.

Star the Turborepo repository ⭐

5. Vitest: Next-generation testing framework

Vitest uses Vite’s super-fast dev server to run tests, retaining Jest-compatible APIs. It delivers near-instant test results, making it ideal for TDD or fast iterative development cycles.

# Installation
npm install -D vitest

// Usage Example
import { test, expect } from 'vitest';

test('adds 1 + 2 = 3', () => {
  expect(1 + 2).toBe(3);
});

test('fetch data', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});

Speed up your testing pipeline with minimal migration effort from Jest.

Star the Vitest repository ⭐

6. Playwright: Modern E2E testing for web apps

Playwright supports automated tests across Chromium, Firefox, and WebKit, complete with robust debugging features. It waits automatically for elements, reducing flakiness and saving time.

# Installation
npm init playwright@latest

// Usage Example
import { test, expect } from '@playwright/test';

test('homepage test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading')).toHaveText('Installation');
});

Visual and trace debugging makes spotting and fixing test issues easier.

Star the Playwright repository ⭐

7. Val Town: Social JavaScript/TypeScript runtime

Val Town blends serverless functions with a social component, allowing you to share, run, and explore JS/TS snippets instantly. Discover what others are building and collaborate directly in a cloud environment.

// Usage Example (@username.myFunction)
export async function myFunction() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

Prototype ideas fast and learn from a community of developers in real-time.

8. Bun: All-in-one JavaScript runtime and toolkit

Bun aims to replace Node.js, npm, and Jest with a swift runtime and integrated test runner. Built on JavaScriptCore, it offers blazing-fast startup times and impressive performance benchmarks.

# Installation
curl -fsSL https://bun.sh/install | bash

// Usage Example (server.ts)
const server = Bun.serve({
  port: 3000,
  async fetch() {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Server running on port ${server.port}`);

Combine top-tier speed with simpler tooling for a more efficient dev experience.

Star the Bun repository ⭐

9. Grafbase : Edge GraphQL platform

Grafbase deploys your GraphQL APIs at the network edge, minimizing latency. It packs schema management, versioning, and authentication into an easy-to-use solution.

# Installation
npm install -g grafbase

# Usage Example
type Post @model {
  id: ID!
  title: String!
  content: String
  author: User! @relationship(type: "AUTHORED_BY")
}

type User @model {
  id: ID!
  name: String!
  posts: [Post]! @relationship(type: "AUTHORED_BY")
}

Deliver globally fast GraphQL endpoints with minimal setup overhead.

Star the Grafbase repository ⭐

10. Hono: Ultrafast web framework for the edge

Hono runs seamlessly on platforms like Cloudflare Workers and Deno Deploy, delivering lightning-fast responses for edge applications. Its lightweight yet robust design suits latency-critical scenarios.

# Installation
npm install hono

// Usage Example
import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => c.text('Hello Hono!'));
app.post('/api/posts', async (c) => {
  const data = await c.req.json();
  return c.json({ success: true, data });
});

export default app;

Build robust edge apps quickly with minimal setup and strong type safety.

Star the Hono repository ⭐

11. Shadcn/ui: Reusable components built with Radix UI and Tailwind

shadcn/ui provide accessible, customizable components leveraging Radix UI primitives and Tailwind CSS. Instead of a package, you copy the component code to maintain full control.

# Installation
npx shadcn-ui@latest init

// Usage Example
import { Button } from "@/components/ui/button";

export default function Home() {
  return <Button variant="outline">Click me</Button>;
}

Build consistent UIs with accessible components that you can tweak to fit your needs.

Star the Shadcn/ui repository ⭐

12. Remix: Full stack web framework

Remix emphasizes server-side rendering and progressive enhancement, offering nested routes and out-of-the-box data loading. It’s ideal for building modern, interactive sites with robust performance.

# Installation
npx create-remix@latest

// Usage Example
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  return json({ posts: await getPosts() });
}

export default function Posts() {
  const { posts } = useLoaderData();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}