A professional-grade, stunning Run in Postman button designer with unique styles, advanced animations, and custom gradients.
- 10 Unique Button Designs: Truly different styles, not just color variations
- Professional Dark Interface: Modern, eye-catching design tool
- Advanced Gradient Editor: Real-time color customization with live preview
- Multiple Export Formats:
- Inline HTML: Clean code for embedding directly
- Complete HTML: Full page ready for deployment
- Full Postman Integration: Maintains official Run in Postman functionality
- One-Click Operations: Copy to clipboard and download instantly
- Responsive Design: Works beautifully on all devices
- Neon Glow - Futuristic pill shape with glowing effects
- Angular Tech - Sharp, modern design with angular edges
- Soft Organic - Unique asymmetric curves and gentle shadows
- Ghost Outline - Minimalist outlined design with gradient borders
- 3D Elevated - Three-dimensional appearance with depth
- Glass Effect - Trendy glassmorphism with blur and transparency
- Retro Vintage - 80s-inspired bold typography and hard shadows
- Neumorphic - Soft extruded appearance that seems to float
- Icon Focus - Large icon emphasis with compact text
- Ultra Minimal - Clean, flat design with subtle interactions
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd postman-button-library- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser
-
Enter Postman Details:
- Collection ID (required)
- Workspace ID (required)
- Custom button text (optional)
-
Choose a Style:
- Select from 8 pre-designed button styles
- Each style has unique gradients, shadows, and typography
-
Customize (Optional):
- Click "Customize" to access color picker
- Choose custom gradient colors using predefined colors or color picker
- See live preview of your changes
-
Generate Code:
- Switch between "Inline HTML" and "Full HTML" tabs
- Copy code to clipboard with one click
- Download complete HTML file for full page option
-
Integrate:
- Paste the generated code into your website
- The button will maintain full Postman functionality
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS
- Language: TypeScript
- Icons: Lucide React
- Animations: Framer Motion
src/
├── app/ # Next.js app router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ButtonPreview.tsx
│ └── ColorPicker.tsx
├── lib/ # Utility functions
│ ├── button-styles.ts
│ └── html-generator.ts
└── types/ # TypeScript types
└── button.ts
Each button style includes:
- Unique gradient combinations
- Custom border radius
- Tailored padding and typography
- Distinctive shadow effects
- Hover animations
- Inline HTML: Minimal code for embedding
- Full HTML: Complete page with necessary scripts
- Postman Integration: Includes official Postman Run Button script
- Cross-browser Support: Works across all modern browsers
- Color Picker: Choose any color for gradients
- Predefined Colors: Quick selection from 12 popular colors
- Real-time Preview: See changes instantly
- Custom Text: Personalize button text
npm run build
npm startnpm install -g vercel
vercel- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help, please:
- Check the documentation
- Search existing issues
- Create a new issue with detailed information
Made with ❤️ for the Postman community