Jizzmalflow is a dynamic JSON visualization tool built with Next.js, leveraging the power of Tailwind CSS for a modern and responsive UI. Designed to render JSON data interactively with enhanced features like clickable URLs, image previews, and mailto links, Jizzmalflow stands out as a practical and visually appealing tool for developers and content creators alike.
- Dynamic JSON Viewer: Visualizes JSON data with syntax highlighting inspired by the "Shades of Purple" VS Code theme.
- Interactive Elements: Detects special JSON keys to render clickable links, email addresses, and image thumbnails.
- Tailwind CSS Integration: Utilizes Tailwind CSS for a customizable and responsive design.
- Client-Side Rendering: Employs the "use client" directive in Next.js for interactive UI components.
To get started with Jizzmalflow, follow these simple steps:
-
Clone the repository
git clone https://github.com/loftwah/jizzmalflow.git cd jizzmalflow
-
Install dependencies
npm install # or yarn install # or pnpm install # or bun install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000 to see Jizzmalflow in action.
app/
: Contains the main application code, including the entry pointpage.tsx
and theJsonViewer
component.public/
: Static assets like images (e.g.,public/images/jizzmalflow.jpg
) should be placed here.styles/
: Tailwind CSS and custom CSS files for global styles.
Contributions to Jizzmalflow are welcome! Feel free to fork the repository, make your changes, and submit a pull request.
Deploying Jizzmalflow is easiest using the Vercel Platform, courtesy of the creators of Next.js.
For more details on deployment, check out the Next.js deployment documentation.
To learn more about the technologies used in Jizzmalflow, consider the following resources:
- Next.js Documentation - Learn about Next.js features and API.
- Tailwind CSS Documentation - Learn about utility-first styling with Tailwind CSS.
Jizzmalflow is open-sourced under the MIT license. See the LICENSE file for more details.