Moussax Snippets

I got tired of typing the same stuff over and over again. I wanted quick, memorable snippets with abbreviations that made sense — so I built my own collection.

---

• Moussax Snippets
• 📄 Snippets [11]
• 🧩 Installation
  • VS Code / Cursor Installation
    • Step 1: Search User Snippets
    • Step 2: Select "Typescript"
    • Step 3: Add the snippets
  • Jetbrains IDE Installation
    • Step 1: Download the Live Templates
    • Step 2: Import the settings
    • Step 3: Verify the templates
• Snippets Usage

---

📄 Snippets [16]

Note

The jetbrains version of the snippets contains additional snippets such as ustat for useState and more...

Name	Prefix	Description
component	com	Base component boilerplate
component-with-props	comp	TypeScript component with props type
component-with-base	comb	Component with children and className props (using cn utility)
commponent-with-props-children	comc	Create base TypeScript component with props children.
server-component	coms	Create a server component
not-found-page	n404	Nextj.js 404 error page layout
error-page	nerr	Next.js Generic error boundary page with reset support
next-layout-page	nlay	Base layout file with children and async params
next-loading-page	nloa	Loading state page (used in Next.js route loading)
next-page	npag	Base page component using params
next-route-handler	nrou	API route handler for GET requests using NextResponse
providers	prov	Global provider component with React Query setup (requires @tanstack/react-query)
zod-schema	schem	Create a Zod schema and infer the type (requires zod library)
tanstack-useMutation	nmut	Create a tanstack useMutation template (requires @tanstack/react-query)
tanstack-useQuery	nquer	Create a tanstack useQuery template (requires @tanstack/react-query)

🧩 Installation

VS Code / Cursor Installation

Grab the snippets zip: vscode-snippets.zip and follow the steps below.

Step 1: Search User Snippets

Step 2: Select "Typescript"

Step 3: Add the snippets

You will right-click and then select "Reveal in Finder" on macOS or "Reveal in Explorer" for Windows

• In the opened folder, drag and drop vscode-snippets.zip and extract its contents.
• Restart VS Code (if needed).

Now you can drag-n-drop mes files vscode-snippets in the same folder as our current file. And voila you have snippets.

---

Jetbrains IDE Installation

Step 1: Download the Live Templates

Download the settings.zip file.

Step 2: Import the settings

• In your JetBrains IDE, go to File > Manage IDE Settings > Import Settings.

• Select settings.zip and click OK.

• Restart the IDE when prompted.

Step 3: Verify the templates

• Navigate to File > Settings > Editor > Live Templates.
• You should see a group named Moussax React Snippets (Next.js).

Snippets Usage

• Open a supported file (.ts, .tsx).
• Type the snippet prefix (e.g., com, comb, n404).
• Press Tab and voilà, snippet code appears.