Template Gallery

Browse curated code screenshot templates. Click “Use this template” to open it in the editor with all settings pre-configured.

20 templates
import { useState, useCallback } from 'react';
 
export function useToggle(initial = false) {
const [value, setValue] = useState(initial);
 
const toggle = useCallback(() => {
typescriptfrontend

React Custom Hook

Clean custom hook pattern with TypeScript

Use this template
'use server';
 
import { z } from 'zod';
 
const schema = z.object({
email: z.string().email(),
typescriptfrontend

Next.js Server Action

Type-safe server action with validation

Use this template
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
 
const buttonVariants = cva(
'inline-flex items-center rounded-md font-medium transition-colors',
{
typescriptfrontend

Tailwind Button Component

Variant-based button with cva

Use this template
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
 
export function authenticate(
req: Request,
res: Response,
typescriptbackend

Express Auth Middleware

JWT authentication middleware

Use this template
// prisma/schema.prisma
 
model User {
id String @id @default(cuid())
email String @unique
name String?
typescriptbackend

Prisma User Model

Complete user model with relations

Use this template
use thiserror::Error;
 
#[derive(Error, Debug)]
pub enum AppError {
#[error("Not found: {0}")]
NotFound(String),
rustbackend

Rust Error Handling

Custom error type with thiserror

Use this template
package handlers
 
import (
"encoding/json"
"net/http"
)
gobackend

Go HTTP Handler

Clean REST API handler with Go

Use this template
# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
bashdevops

Multi-Stage Dockerfile

Optimized Node.js Docker build

Use this template
name: CI/CD Pipeline
 
on:
push:
branches: [main]
pull_request:
yamldevops

GitHub Actions CI

CI pipeline with test and deploy

Use this template
resource "aws_lambda_function" "api" {
filename = "lambda.zip"
function_name = "${var.project}-api"
role = aws_iam_role.lambda.arn
handler = "index.handler"
runtime = "nodejs20.x"
bashdevops

Terraform AWS Lambda

Serverless function infrastructure

Use this template
function binarySearch<T>(
arr: T[],
target: T,
compare: (a: T, b: T) => number
): number {
let lo = 0;
typescriptalgorithms

Binary Search

Classic binary search implementation

Use this template
type AnyFn = (...args: unknown[]) => unknown;
 
function debounce<T extends AnyFn>(
fn: T,
delay: number
): (...args: Parameters<T>) => void {
typescriptalgorithms

Debounce Function

Generic debounce with TypeScript

Use this template
class ListNode<T> {
constructor(
public value: T,
public next: ListNode<T> | null = null
) {}
}
typescriptalgorithms

Linked List

Type-safe linked list in TypeScript

Use this template
class Database {
private static instance: Database;
private pool: ConnectionPool;
 
private constructor() {
this.pool = new ConnectionPool({
typescriptdesign-patterns

Singleton Pattern

Thread-safe singleton in TypeScript

Use this template
type EventMap = Record<string, unknown>;
type Listener<T> = (data: T) => void;
 
class EventEmitter<E extends EventMap> {
private listeners = new Map<keyof E, Set<Listener<unknown>>>();
 
typescriptdesign-patterns

Observer Pattern

Event emitter with typed events

Use this template
interface Notification {
send(to: string, message: string): Promise<void>;
}
 
class EmailNotification implements Notification {
async send(to: string, message: string) {
typescriptdesign-patterns

Factory Pattern

Abstract factory for notification services

Use this template
import time
import functools
from typing import TypeVar, Callable
 
T = TypeVar('T')
 
pythontips

Python Retry Decorator

Exponential backoff retry decorator

Use this template
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar header"
cssfrontend

CSS Grid Dashboard

Responsive dashboard layout with CSS Grid

Use this template
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
 
interface AuthState {
user: User | null;
token: string | null;
typescriptfrontend

Zustand Store

Type-safe Zustand store with slices

Use this template
SELECT
u.name,
o.total,
o.created_at,
ROW_NUMBER() OVER (
PARTITION BY u.id
sqltips

SQL Analytics Query

Window functions for analytics

Use this template