Web Code Tools is a collection of useful tools for web developers, including CSS, HTML, microdata, JSON-LD, meta-tags, open graph, and more.

Jason Macfarlane

Web Code Tools

A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

Nils Binder

BEM Cheat Sheet

Hundreds of beautiful and responsive UI components, premade and ready to use for your next ReactJS project.

Made with Chakra UI and Framer Motion.

Saša Šijak

React UI Boutique

A tool that helps you determine the correct react-spring config for your animations.

Joost Kiens

React Spring visualizer

Carefully crafted, easy to customize, fully responsive UI components for your Tailwind CSS based projects that can help you design great looking marketing pages and web applications. Crafted with love for web developers, web agencies and digital nomads.

John Champ

Tailkit

Shipr is a NoCode Builder for Devs & Makers to build their React SaaS just from a GUI.

They will be able to design their landing pages, capture emails addresses, and build their entire SaaS App complete with Authentication, Database, Analytics and many other features without having to leave the Shipr Builder.

Shipr

By properly configuring a few key input attributes, you can make web forms much easier to use on mobile devices.

Experiment with different combinations of the related type and inputmode attributes, and make sure to specify an autocomplete attribute for an optimized user experience.

Alex Holachek

Better Mobile Inputs

The fastest way to take full page screenshots and collaborate real-time with anyone around the world. Capture, edit, crop, comment, annotate, download or share your screenshots instantly using a link and without giving away your personal data.

Make changes at the same time as your remote team just like Google Docs. Easily explain things, provide feedback and reduce the back and forth with your co-workers or customers.
 
Snippyly is an external version of Google's most used internal productivity and collaboration tool, built by two ex Googlers. Simple, no non-sense, no ads, no spyware, and no blanket permissions. This is a modern tool built with the latest and secure Google tech. All screenshots are stored anonymously on Snippyly servers.

💥 WHY USE SNIPPYLY 💥
 
🚀 DO MORE: Increase team productivity by eliminating endless back and forths via emails, Slack, Google Chat or Microsoft Teams. No need to set up meetings for everything
🕵️‍♀️ REPORT BUGS: Report visual bugs to your developers directly into your project management tools and issue trackers (e.g. Jira, Trello, Asana, Notion, Airtable, GitHub, Google Sheets)
🙌  COLLABORATE FASTER: Highlight important stuff, share ideas and ask questions in a company document, dashboard or personal project
👩‍🏫 GIVE CLEAR FEEDBACK: Provide rapid and clear feedback on your websites and apps
✨ EXPLAIN CONCISELY: Add helpful visuals to your how-to tutorials 
👩‍💻 SOLVE FASTER: Improve your customer support chat experience by efficiently troubleshooting and helping clients follow the right steps

ℹ️ HOW IT WORKS ℹ️ 

1. DOWNLOAD FOR FREE, ZERO PERMISSION REQUIRED
Download the free extension. No permissions, no ads, no registration required. 
Easily access your extension from your address bar by pinning it like this: 
https://snippyly.com/?q=9EIO9Q0Cl4djGofCl0Gv

2. TAKE A SCREENSHOT
Use any of these options:
• Click on the extension icon to take a screenshot of any webpage. 
• Click on “Full Page” to capture the entire page. 
• Right-click and choose Snippyly from the context menu to take a 3-second time-delayed screenshot
• Use Cmd/Ctrl + Shift + Y. To customize your shortcuts, go to: chrome://extensions/shortcuts 

3. EDIT AND COMMENT
Use any of these tools:
• Crop
• Annotate
• Highlight important parts
• Hide sensitive elements
• Add comments (like Google Docs)

4. SHARE USING A LINK OR DOWNLOAD
Use any of these options:
• Share your screenshot via a unique view-access or edit-access link, for example in Slack, Google Chat, Microsoft Teams or in your project management tool (e.g. Jira, Trello, Asana, Notion, Airtable, GitHub)
• Download it as an image (JPG format)

5. COLLABORATE IN REAL-TIME 
You and the people you share the screenshot link with edit-access can work together and make changes at the same time, just like with Google Docs. Engage in real-time discussions through comments with your team members or customers. 

⭐️ PREMIUM FEATURES ⭐️

✅ Higher resolution screenshots
✅ Slack integration
✅ Domain restricted access
✅ Screenshot management

Solene Oudet

Rakesh Goyal

Snippyly

Figstack gives non-technical people the technical skills they need to understand code. Figstack can instantly write documentation, explain, translate, and compute the time complexity of your code for you.

Figstack

Fire Hunt Finds you product launches from all over the web and serves it in a beautiful digestible form .Now you don't need to switch websites to discover awesome product launches, From Product Hunt to Hacker news we cover product launches from the best sources

Tom shwa

Fire Hunt

Queues is a productivity tool for team members. It provides you with your own private space for managing your own collaborative work.

**Background**: Modern teams use a wide set of collaborative tools for their work, many of which have become **streams of work** for the team **individuals**.

**The problem**: Our work as individuals is scattered around multiple tools and places. It is **not organized** according to the person that actually performs it- **us**!

**The solution**: Queues provides you with **your own** private space for managing **your own** collaborative work, as sourced from the multiple tools your team uses.

**How it works**:

1. Get all collaboration updates from the multiple tools your team uses in one personalized feed
2. Easily convert updates that require further action to synced tasks
3. Reflect on all your work- smartly ordered by impact, and organized according to your own context
+. Learn from your habits and become more productive

Queues

Simplify documentation and avoid heavy tools when generating flowcharts, sequence diagrams, class diagrams, and more.

0xADADA

Mermaid Live Editor

VS Code to Prism Themes is a small web tool that helps you convert your VS Code theme to Prism CSS or React components.

Sara Vieira

VS Code to Prism Themes

Blackish Resource is part of the ecosystem of Blackish Platform. It is an all-in-one platform for creators which consists of community, marketplace, resource, and learning.

Tan Jin Xue

Blackish Resource

SiteLint allows you to perform site audits to determine issues that impact SEO, Performance, Accessibility, Security, and Quality. All audits are performed client-side, real-time, which means real users, real networks, and real devices.

SiteLint

Tolgee is an open-source developer tool for web apps localization. 

We try to reshape the process of software localization with a different approach, which aims to save time and effort of everyone who is getting involved in the localization process such as developers and translators. Tolgee is a very simple tool to deploy and to use.

Tolgee

Graphite is an automated predictive analytics web platform with a data storytelling capability. It is helping business experts and engineers without a data science background to bring the power of machine learning to their data analysis. The innovative thing about Graphite is that users can create a Data Story and easily share AI results with their team. That allows regular business people to understand possibly complex insights so they can apply them to business decisions

Graphite Note

Add a production-ready import feature to your web app in just a few minutes.

Your users can upload CSV or XLS files, map columns, fix validation errors and submit data all in a few clicks. You receive ready-to-use data in your app.

csvbox.io

Vuestic UI is a components library for Vue 3. It features more than 50 highly customisable components, forever free and Open Source. 

Vuestic Admin (https://github.com/epicmaxco/vuestic-admin) is a great example of a real-world web application based on Vuestic UI and is used by Epicmax (the company that stands behind Vuestic ecosystem) to bootstrap numerous products developed for the company’s clients.

Vuestic UI

Argonaut is a cloud management platform through which you can provision environments, manage your cloud infrastructure, deploy apps, integrate third-party tools, and more. Argonaut’s product immensely benefits high-growth startup teams building cloud-first applications. Argonaut’s users save weeks’ worth of infrastructure setup time and tens of thousands of dollars on infrastructure maintenance costs. While using Argonaut, your apps are supercharged as we make managing the stack of your choice a breeze, with best practices built-in, out of the box. What’s more, is that you have complete visibility in context into the health and costs of your infrastructure.

Argonaut

AdminKit is a professional Web UI Kit & Admin Template based on Bootstrap that comes with hundreds of UI components, forms, tables, charts, pages, and icons. AdminKit helps you to create your next Bootstrap based project even faster than before. It can be used to create a Saas based interface, administrator dashboard, or anything you want to build on the web. AdminKit helps your team moving faster and saving development costs.

Paul Laros

AdminKit

Omatsuri is a progressive web application with 12 open source frontend-focused tools. Omatsuri translates to «festival» from Japanese (お祭り) and here we have a small festival of applications.

Vitaly Rtishchev

Omatsuri

Your website holds your design tokens

Design tokens are the smallest parts of your design: colors, typography, spacing etc. With them you can make consistent experiences across different parts of your website and app and even across projects.
Use them anywhere

Superposition extracts the design tokens your site already has and exports them to CSS, Scss, JavaScript, Figma and Adobe XD with Sketch, Swift and Android exports on the way.

From the overview of each group, simply click on a token to add the CSS value to your clipboard for easy usage.

Kilian Valkhof

Superposition

Easy User Test is a user testing tool that offers the easiest way to test your text and design. We as a remote user research platform give you a single, centralized product feedback solution to analyze and follow feedback from clients by validating them with real users. Often designers, copywriters, entrepreneurs, and marketers don't take the time to validate their landing pages, Instagram posts, newsletters, and headlines with real users to ensure they hit their target. It isn't they don't want to, but they are constrained by deadlines and budgets. Traditional user testing takes lots of expertise, time, and money. Our goal was to create a standardized test that can be set up in minutes, is affordable, and is as fast as possible. Our goal is to unleash your potential by validating your text and design decisions with real users. You get what you aim for.

Easy User Test

Belltastic is a pre-built notification inbox web component for your app. Just paste the code snippet where you want the notifications to appear, and start sending notifications with our official Laravel package, or our public API. The notifications will come in real-time, so your users are immediately notified about new events. Save hundreds of dev hours by using a pre-built component for free!

Arunas

Belltastic

Find The Best Upcoming Solana NFT to mint. Using powerful data analysis tools that power our AI, Moonly is able to recognize possible blue-chip NFT projects analyzing over 18 different factors like social stats, engagement, validation of followers, growth rate, doxxed founders, roadmap, Discord community, etc.

Moonly also offers a set of tools to help you monitor existing NFT projects and make better decisions on trading. Like Floor Price, Volume, Listing count historical data, undercut opportunities, and more. 

Chrome Extension is there to show you valuable info about the project, while you are browsing secondary marketplaces. 

Moonly itself is an NFT, which is not just another PfP (profile picture) project, but it comes with very strong utility-like access to the premium tools available only to Moonly NFT holders, royalty sharing, discount on partnered NFT projects, and a lot of more.

Moonly

DbSchemaLibrary is a library of more than 200 database schema that developers can use to design database schema faster.

Developers spend days designing a database every project. We believe that this process can be faster and simpler. To do that, we provide developers with hundreds of database schema from many different fields. Developers can copy or reference existing designs to make better design decisions, faster.

DbSchemaLibrary

ConnectDome is a platform that solves your project dead-ends.

It helps you match with developers, designers, projects and ideas on the premise of building something together.

Arhaan Ahmad

ConnectDome

Can I Include is a tool that helps you understand which tag you can include in another using the WhatWG HTML specification.

Alexander Vishnyakov

Can I Include

Join the thousands who are getting the Computer Science skills employers are actually looking for.

Boot camp graduates and self-taught developers have flooded the job market with thousands of entry-level developers. It’s now harder to find junior-level jobs, and you’ll hit a career ceiling quickly if you never learned computer science fundamentals.

University degrees take four years and cost thousands of dollars. We'll get you what you need to find a successful development job on your schedule for pennies.

Qvault

Keyframes help you write better CSS. Create basic or complex CSS keyframe animations with a visual timeline editor similar to video-editing software, single or multi-layer box shadows just by moving some sliders, convert between hex and RGB, and save palettes.

Mitch Samuels

Keyframes

BEAM Devs is a platform that makes it easier for Elixir and Erlang developers find their next job, as well as making it easier and cheaper for businesses to hire them. Everybody wins!

BEAM Devs

Userfront offers an auth framework without complexity with SSO, access control, multi-tenancy, and more. Giving you secure, standards-based authentication & authorization with a focus on simple setup, testing, and administration.

Tyler

Userfront

Video to Markdown is a small tool that helps you convert a video URL to markdown code quickly and easily.

Marco Montalbano

Video to Markdown

Greetings Everyone😊,
I was a freelance web designer for 2 years and a lot of my time would involve cool looking websites. Often, I’d use a tool like Evernote to capture great designs and write notes about them. These notes usually involved the color palette and fonts used. It got extremely tedious continually ‘inspecting’ websites and typing up notes - I really didn’t have the time. Then is when I thought about building a micro-SaaS app that can solve this.

Yizy uses a web browser extension to bookmark a website, take a screenshot of the current page and automatically pull in relevant information, such as color palettes and CSS property, from the page source. It also allows you to put both Comment and CSS annotations on your screenshots and images. The CSS annotation includes CSS properties of any selected part of a web page being screenshot (pulled automatically from the website).

On your dashboard, you will see three Categories: Inspirations, Sources and Collections. Any screenshot or image uploaded on Yizy is found in Inspirations. The URLs (website addresses) saved can be found in Sources. Collections is like a folder for Inspirations (e.g. Images) and Sources (e.g. URL) you wish to save in. Every Inspiration, Source, or Collection is taggable and can be easily searched in the “Search” toolbar by either Keyword or Tag or both.
I really appreciate your feedback and taking the time to check it out!

Yobiela

Yizy

GeniePy is a Python boilerplate for building SaaS products that saves you months of development time.

The following features work out of the box:

- Database integration
- User management
- Stripe subscriptions
- Blog (Markdown based)
- Sending Emails
- Cloud file storage
- Real-time updates using Websockets


Thanks to the Starlette foundation, it provides an asynchronous first codebase with very high performance on day one.

Developer Tools