xSnippets

xSnippets - Your Ultimate Snippets Extension for Next.js, React, Vue.js, Svelte, Prisma, tRPC, Auth, Backend Frameworks, AI Services, Payment Gateways and More! 🚀✨ Harness the power of xSnippets to boost your productivity in web development. Dive into a world of efficient coding with snippets tailored for popular frameworks. 🌐💻 Unleash the potential of your favorite frameworks with xSnippets.

Features

🚀 Ultimate Framework Support: xSnippets covers Next.js, React, Vue.js, Svelte, Remix, Prisma, Drizzle, tRPC and more!
🔒 Authentication Support: Snippets for NextAuth.js, Supabase Auth, Clerk, and more.
🧠 AI Integration: Vercel AI SDK, OpenAI, Anthropic Claude snippets for AI-powered applications.
💰 Payment Processing: Stripe, Razorpay, PhonePe, CoinBase and other payment gateway integration snippets.
🖥️ Backend Development: Express, Fastify, Hono, Bun, Elysia, and Deno snippets for robust backends.
🌐 Efficient Coding: Boost your productivity with snippets designed for popular web frameworks.
🎨 Framework Agnostic: Write code seamlessly across multiple frameworks.
💻 Versatile Snippets: Includes a wide range of snippets for components, hooks, routing, and more.
🧰 Flexible Usage: Easy-to-use snippets with intuitive prefixes for quick insertion.

Usage

Open JavaScript or TypeScript or React, Next, Vue, Svelte, Remix file in VS Code.
Type the snippet prefix and press Tab to insert the snippet.

xSnippets - Available Snippets

React JavaScript Snippets

Snippet Prefix	Purpose
`rfce` or `react_component`	React Functional Component with Export
`rafc` or `react_arrow`	React Arrow Function Component
`rust` or `react_usestate`	React useState Hook
`ruef` or `react_useeffect`	React useEffect Hook with optional cleanup
`ruct` or `react_usecontext`	React useContext Hook
`rured` or `react_usereducer`	React useReducer Hook
`ruref` or `react_useref`	React useRef Hook
`rctxp` or `react_context_provider`	React Context Provider Component
`rcuh` or `react_custom_hook`	React Custom Hook Template
`rmemo` or `react_memo`	React Memoized Component
`reb` or `react_error_boundary`	React Error Boundary Class Component
`rform` or `react_form`	React Form with Controlled Components

React TypeScript Snippets

Snippet Prefix	Purpose
`rtfce` or `reactts_component`	React TypeScript Functional Component with Interface
`rtafc` or `reactts_arrow`	React TypeScript Arrow Function Component
`rtust` or `reactts_usestate`	React TypeScript useState Hook with Type
`rtctxp` or `reactts_context_provider`	React TypeScript Context Provider Component
`rtuct` or `reactts_usecontext`	React TypeScript Custom useContext Hook
`rtcuh` or `reactts_custom_hook`	React TypeScript Custom Hook Template
`rtform` or `reactts_form`	React TypeScript Form with Validation
`rtgen` or `reactts_generic`	React TypeScript Generic Component

Next.js Snippets (TypeScript)

Snippet Prefix	Purpose
`nxTSpg` or `nextTS_Page`	Next.js Page with TypeScript interface
`nxTSpge` or `nextTS_PageExport`	Next.js Page with TypeScript interface (exported function)
`nxTSapge` or `nextTS_ArrowPageExport`	Next.js Page with TypeScript interface (arrow function export)
`nxTSapg` or `nextTS_ArrowPage`	Next.js Page with TypeScript interface (arrow function)
`nximg`	Next.js usage of Image Component
`nxlink`	Next.js Link Component
`nxerr`	Next.js Error Component with TypeScript
`nxTSdynamicMetaData`	Generates Next.js metadata with TypeScript types
`nxTSlayout`	Next.js Layout Component with TypeScript
`nxTSmiddleware`	Next.js Middleware with TypeScript
`trpc_init`	Initialize tRPC
`nxTSloading`	Next.js Loading Component with TypeScript
`nxTSaction` or `nxTSserveraction`	Next.js Server Action with TypeScript and Zod validation
`nxTSroute` or `nxTSroutehandler`	Next.js Route Handlers for GET and POST with TypeScript
`nxTSform` or `nxTSserverform`	Next.js Form Component with Server Action using TypeScript
`nxTSserver` or `nxTSservercomponent`	Next.js Server Component with data fetching using TypeScript
`nxTSswr` or `nxTSuseSWR`	Custom SWR hook for data fetching in Next.js with TypeScript

Next.js Snippets (JavaScript)

Snippet Prefix	Purpose
`nextpage` or `nxpg`	Creates new Next.js 14 Page
`nximg`	Next.js usage of Image Component
`nxlink`	Next.js Link Component
`nxloading`	Next.js Loading Component
`nxaction` or `nxserveraction`	Next.js Server Action
`nxroute` or `nxroutehandler`	Next.js Route Handlers for GET and POST
`nxform` or `nxserverform`	Next.js Form Component with Server Action handling
`nxmeta` or `next_metadata`	Next.js static metadata for a page
`nxlayout` or `next_layout`	Next.js layout component
`nxerror` or `next_error`	Next.js error component for error handling
`nxedge` or `next_edge_api`	Next.js API route with Edge runtime
`nxparams` or `next_params`	Next.js page component with dynamic route params
`nxparallel` or `next_parallel`	Next.js layout with parallel routes

tRPC Snippets

Snippet Prefix	Purpose
`trpc_init`	Initialize tRPC with error handling
`trpc_context`	Create tRPC context
`trpc_router`	Create tRPC router with subrouters
`trpc_procedure`	Create tRPC router with query and mutation
`trpc_auth_middleware`	Create tRPC auth middleware and protected procedure
`trpc_nextjs_handler`	Create tRPC handler for Next.js App Router
`trpc_provider`	Create tRPC provider for React applications
`trpc_react`	Create tRPC React client setup
`trpc_hooks`	Example of using tRPC hooks in a React component

Authentication Snippets

Snippet Prefix	Purpose
`nextauth_setup`	Setup NextAuth.js in a Next.js App Router project
`nextauth_provider`	Create a NextAuth.js provider component
`nextauth_hooks`	Example of using NextAuth.js hooks in a component
`nextauth_signin_page`	Create a custom sign-in page for NextAuth.js
`nextauth_middleware`	Create NextAuth.js middleware for route protection
`nextauth_session`	Get NextAuth.js session and current user on server
`supabase_auth_client`	Initialize Supabase client for authentication
`supabase_signup`	Create a Supabase sign-up form
`supabase_login`	Create a Supabase login form with OAuth options
`supabase_auth_context`	Create a Supabase auth context provider and hook
`clerk_provider`	Set up Clerk Provider in a Next.js app
`clerk_components`	Use Clerk's pre-built auth components
`clerk_middleware`	Set up Clerk auth middleware for route protection
`clerk_hooks`	Use Clerk auth hooks in a React component

Backend Framework Snippets

Snippet Prefix	Purpose
`hono_server`	Create a basic Hono server with routes
`hono_routes`	Create a Hono route group
`hono_middleware`	Create a Hono middleware function
`hono_zod`	Create a Hono route with Zod validation
`bun_server`	Create a basic Bun HTTP server
`bun_file`	Bun file operations (read/write)
`elysia_server`	Create an Elysia server with Bun
`elysia_validation`	Create an Elysia endpoint with type validation
`express_server`	Create an Express server with middleware and routes
`express_routes`	Create Express routes for a resource
`express_controller`	Create Express controller with CRUD operations
`express_middleware`	Create Express middleware function
`fastify_server`	Create a Fastify server with plugins and routes
`fastify_routes`	Create Fastify routes with schema validation
`deno_fresh`	Create a Deno Fresh page with server handler
`deno_oak`	Create a Deno Oak server with middleware and routes

AI Service Snippets

Snippet Prefix	Purpose
`vercel_ai_chat`	Create a Vercel AI SDK chat endpoint with streaming
`vercel_ai_react`	Create a React component for chat using Vercel AI SDK
`openai_chat`	Create a function to generate chat responses with OpenAI
`anthropic_claude`	Create a function for responses with Anthropic Claude
`resend_email`	Create a function to send emails with Resend

Payment Gateway Snippets

Snippet Prefix	Purpose
`stripe_setup`	Initialize Stripe client
`stripe_payment_intent`	Create a Stripe payment intent
`stripe_checkout`	Create a Stripe checkout session
`stripe_webhook`	Create a Stripe webhook handler
`razorpay_setup`	Initialize Razorpay client
`razorpay_order`	Create a Razorpay order
`razorpay_verify`	Verify a Razorpay payment signature
`razorpay_frontend`	Initialize Razorpay payment on the frontend
`phonepe_setup`	Initialize PhonePe payment constants
`phonepe_payment`	Create a PhonePe payment request
`phonepe_verify`	Verify a PhonePe payment status
`coinbase_setup`	Initialize Coinbase Commerce client
`coinbase_charge`	Create a Coinbase Commerce charge

Prisma Snippets

Snippet Prefix	Purpose
`prisma_model`	Create a Prisma model with id, timestamps and map
`prisma_enum`	Create a Prisma enum
`prisma_relation`	Create a Prisma relation field with foreign key
`prisma_onetomany`	Create a Prisma one-to-many relation
`prisma_manytomany`	Create a Prisma many-to-many relation
`prisma_client`	Create a Prisma client instance
`prisma_singleton`	Create a Prisma client singleton for Next.js
`prisma_create`	Prisma create operation
`prisma_findmany`	Prisma findMany operation
`prisma_findunique`	Prisma findUnique operation
`prisma_update`	Prisma update operation
`prisma_delete`	Prisma delete operation
`prisma_transaction`	Prisma transaction with multiple operations
`prisma_pagination`	Prisma pagination with skip, take and count

Drizzle Snippets

Snippet Prefix	Purpose
`drizzle_schema`	Create a Drizzle schema table with common fields
`drizzle_mysql`	Create a Drizzle schema table for MySQL
`drizzle_sqlite`	Create a Drizzle schema table for SQLite
`drizzle_relation`	Create a Drizzle foreign key relation
`drizzle_client`	Create a Drizzle client setup
`drizzle_pg_client`	Create a Drizzle client for PostgreSQL
`drizzle_mysql_client`	Create a Drizzle client for MySQL
`drizzle_sqlite_client`	Create a Drizzle client for SQLite
`drizzle_insert`	Drizzle insert operation
`drizzle_select`	Drizzle select operation
`drizzle_join`	Drizzle select with join operation
`drizzle_update`	Drizzle update operation
`drizzle_delete`	Drizzle delete operation
`drizzle_transaction`	Drizzle transaction with multiple operations
`drizzle_migration`	Drizzle migration script

Zod Snippets

Snippet Prefix	Purpose
`zod_schema`	Create a basic Zod schema with type inference
`zod_form`	Create a Zod schema for form validation with errors
`zod_api`	Create a Zod schema for API input validation
`zod_union`	Create a Zod discriminated union type
`zod_array`	Create a Zod array schema with validation
`zod_enum`	Create a Zod enum schema
`zod_record`	Create a Zod record schema (key-value pairs)
`zod_validate`	Create a validation function using Zod schema
`zod_formdata`	Create a function to parse and validate FormData
`zod_safeparse`	Use Zod's safeParse to validate data with error handling
`zod_custom`	Create a custom Zod validator with refinement

Zustand Snippets

Snippet Prefix	Purpose
`zustand_store`	Create a basic Zustand store
`zustand_ts`	Create a Zustand store with TypeScript and async actions
`zustand_persist`	Create a Zustand store with persistence
`zustand_slices`	Create a Zustand store with multiple slices
`zustand_hook`	Example of using a Zustand store in a React component
`zustand_immer`	Create a Zustand store with Immer for simpler updates
`zustand_computed`	Create a Zustand store with computed values

Jotai Snippets

Snippet Prefix	Purpose
`jotai_atom`	Create a basic Jotai atom
`jotai_ts_atom`	Create a Jotai atom with TypeScript interface
`jotai_derived`	Create a derived read-only Jotai atom
`jotai_readwrite`	Create a read-write Jotai atom
`jotai_async`	Create an async Jotai atom with loading states
`jotai_family`	Create a Jotai atom family
`jotai_hook`	Example of using Jotai atoms in a React component
`jotai_storage`	Create a Jotai atom with localStorage persistence
`jotai_reset`	Create a resettable Jotai atom
`jotai_focus`	Create Jotai atoms with focus management for nested state
`jotai_provider`	Create a Jotai Provider with custom store

Vue Snippets

Snippet Prefix	Purpose
`vuepg_css`	Vue 3 File with TypeScript & CSS
`vuepg`	Vue 3 File with TypeScript, no style
`vuedefineProps`	Vue DefineProps Defaults
`vfor`	Vue v-for statement
`vuerouter`	Vue Router
`vuescrollbehavior`	Vue Router Scroll Behavior
`vcomposition` or `vue_composition`	Vue 3 Composition API basic template
`vreactive` or `vue_reactive`	Vue 3 reactive state declaration
`vref` or `vue_ref`	Vue 3 ref declaration
`vcomputed` or `vue_computed`	Vue 3 computed property
`vwatch` or `vue_watch`	Vue 3 watch function
`vwatcheffect` or `vue_watcheffect`	Vue 3 watchEffect function
`vprovideinject` or `vue_provide_inject`	Vue 3 provide/inject pattern
`vdirective` or `vue_directive`	Vue 3 custom directive definition
`vlifecycle` or `vue_lifecycle`	Vue 3 lifecycle hooks
`vcomposable` or `vue_composable`	Vue 3 composable function template
`vteleport` or `vue_teleport`	Vue 3 teleport component for portals
`vsuspense` or `vue_suspense`	Vue 3 suspense component for async components

Svelte Snippets

Snippet Prefix	Purpose
`svpg`	Creates the template for Svelte
`svpgTS`	Create Svelte template with TypeScript
`sv_slot`	Create a Svelte template with slot
`sv_TS-slot`	Create a Svelte template with slot and TypeScript
`sv_lifecycle-mount`	onMount lifecycle function for Svelte
`sv_lifecycle-destroy`	onDestroy lifecycle function for Svelte
`sv_reactive`	Svelte reactive statement
`sv_reactive_block`	Svelte reactive code block
`sv_each`	Svelte each block for iterating over arrays
`sv_if`	Svelte if-else block
`sv_await`	Svelte await block for promises
`sv_key`	Svelte key block for keyed animations
`sv_store`	Svelte writable store
`sv_derived`	Svelte derived store
`sv_custom_store`	Svelte custom store with additional methods
`sv_action`	Svelte action function
`sv_transition`	Svelte element with transition
`sv_in_out`	Svelte element with separate in/out transitions
`sv_animate`	Svelte element with animation between states
`sv_event`	Svelte event dispatcher for custom events

Nuxt.js Snippets

Snippet Prefix	Purpose
`nuxt_link`	Nuxt router link
`nuxt_link-param`	Nuxt router link with params
`nuxt_fetch`	Nuxt useFetch
`nuxt_fetch-lazy`	Nuxt useLazyFetch
`nuxt_asyncdata`	Nuxt useAsyncData
`nuxt_asyncdata-lazy`	Nuxt useLazyAsyncData
`nuxt_pagemeta`	Nuxt definePageMeta
`nuxt_seo`	Nuxt useSeoMeta
`nuxt_seo-template`	Nuxt useSeoMeta with title template
`nuxt_seo-server`	Nuxt useServerSeoMeta
`nuxt_seo-server-template`	Nuxt useServerSeoMeta with title template
`nuxt_plugin`	Nuxt plugin defaults
`nuxt_middleware`	Nuxt middleware defaults
`nuxt_serverroute`	Nuxt server route defaults
`nuxt_state` or `nuxt_usestate`	Nuxt useState for shared state management
`nuxt_api` or `nuxt_api_route`	Nuxt 3 API route handler
`nuxt_head` or `nuxt_usehead`	Nuxt useHead for dynamic page metadata
`nuxt_error` or `nuxt_error_page`	Nuxt error page template
`nuxt_layout` or `nuxt_layout_template`	Nuxt custom layout template
`nuxt_composable` or `nuxt_use_composable`	Nuxt custom composable function
`nuxt_config` or `nuxt_runtimeconfig`	Nuxt useRuntimeConfig to access environment variables

Acknowledgments

xSnippets aims to simplify web development across various frameworks. It is a community-driven project created for the benefit of developers worldwide. Join us in enhancing the web development experience!

xSnippets

ImKKingshuk

xSnippets

Features

Usage

xSnippets - Available Snippets

React JavaScript Snippets

React TypeScript Snippets

Next.js Snippets (TypeScript)

Next.js Snippets (JavaScript)

tRPC Snippets

Authentication Snippets

Backend Framework Snippets

AI Service Snippets

Payment Gateway Snippets

Prisma Snippets

Drizzle Snippets

Zod Snippets

Zustand Snippets

Jotai Snippets

Vue Snippets

Svelte Snippets

Nuxt.js Snippets

Acknowledgments

💻 Streamline Your Web Development with xSnippets! 💻