Code Snippets, Playgrounds & Online Developer Utilities
78 resources indexed
Speed up your workflow with code snippet libraries, online playgrounds, formatters, validators, and everyday utilities that make development faster and more enjoyable. Bookmark-worthy tools you'll use daily.
Floating UI
A JavaScript library to position floating elements and create interactions for them.
React Native Directory
A searchable and filterable directory of React Native libraries.
Tailspark Tailwind Component Library
300+ TailwindCSS components to build your site in minutes. One-click copy and paste with the full source code and Figma files.
Knights of the Flexbox Table
Welcome to the Knights of the Flexbox table. A game where you can help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the Tailwind CSS dungeons. You can navigate the knight through the dungeon by changing his position within the dungeon using Flexbox and Tailwind CSS.
NativePHP
Write native desktop applications using PHP. NativePHP is a new framework for rapidly building rich, native desktop applications using PHP. If you're already a PHP developer, you'll feel right at home. If you're new to PHP, we think you'll find NativePHP easy to pick up and use. Whatever your path, we think you're going to be productive quickly.
Driver.js
Product tours, highlights, contextual help and more. Onboard your users by explaining how to use your product and answer common questions.
Laravel Herd
One click PHP development environment on macOS. Zero dependencies. Zero headaches. Herd is a blazing fast, native Laravel and PHP development environment for macOS. It includes everything you need to get started with Laravel development, including PHP and nginx. Once you install Herd, you're ready to start developing with Laravel.
Laravel Playground
Laravel Playground allows you to try out PHP and Laravel all from your browser. You have access to all Laravel classes and an extensive list of included Laravel packages (like Laravel DebugBar).
Tinkerwell
The code runner for PHP. Tinkerwell is a REPL on steroids. It allows you to run code snippets within the context of your application without hitting the browser. It's the perfect companion to your favorite IDE and works with any framework – locally, via SSH, Docker and even on Laravel Vapor.
Minicli
Minicli is a minimalist, zero-dependency framework for building CLI-centric PHP applications. It provides a structured way to organize your commands, as well as various helpers to facilitate working with command arguments, obtaining input from users, and printing colored output to the terminal.
Laravel/PHP Package Boilerplate
Boilerplate Generator for Laravel & PHP packages. You have an idea for a Laravel package and want to start working on it? Great! But where should you start? This generator helps you with the boilerplate code to help you focus on what's most important: your package.
Flavio Copes Handbooks
Free handbooks for for learning to code with HTML, CSS, JavaScript, SQL, Go, Svelte, PHP, React, Command Line, Next.js, Express, Node.js, Swift, Python and C!
Twine
Twine is an open-source tool for telling interactive, nonlinear stories. You don’t need to write any code to create a simple story with Twine, but you can extend your stories with variables, conditional logic, images, CSS, and JavaScript when you're ready.
shadcdn/ui
Re-usable components built using Radix UI and Tailwind CSS. Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
C3 CSS
A methodology to help you write human-friendly CSS. C3 (Component, Child, Context) is a methodology for writing CSS, centred around a selector naming convention. This approach is intended for anyone who wants to write code which is semantic, easy to maintain, and scalable. If you are familiar with BEM, you will be familiar with two thirds of C3. Either way, you should find all the information you need in this guide.
Complete Guide to Media Queries
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries.
Inclusive Components
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
Van11y
A collection of accessible scripts, made in ES2015. Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.
ztext.js
Easy to implement, 3D typography for the web. Works with every font.
Build your own React
Rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features.
CodePen Hall of Fame
A curated collection of some legendary CodePens, showcasing the very best in the creative code!
Design Tokens Generator
Quickly create Design System tokens and get JSON, CSS and SASS code. Use our Design Tokens generator to quickstart your next project!
tmi.js Twitch Chat
JavaScript Package for Twitch Chat. Connect to and interact with Twitch chat (IRC) from Node.js or a browser. No API key required!
Can I Include?
Check if a chosen HTML tag can be nested inside another HTML tag according to the spec.
CSS Code Generators
Everything you need to generate awesome CSS for your next project. Customize your options and voila, your CSS code is ready to copy and paste into your project!
Flexbox Defense
Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!
Web Code Tools
Code generators to help you with your front-end web projects. CSS, HTML, OpenGraph, JSON, Meta Tags, Twitter Cards and more.
Learn CSS Grid
Learn CSS Grid with Wes Bos in 25 "pretty good" videos. From fundamentals to real world in about 4 hours.
HTML Elements Reference
Handy guide to every HTML element there is. Replace your divs with more semantic markup.
CodeSandbox
Cloud based IDE. Create, share, and get feedback with collaborative sandboxes for rapid web development.
Webbed Briefs
Brief videos about the web, its technologies, and how to make the most of them.
Cubic Bezier
Visually create cubic bezier curves in the browser for custom animation timings.
Every Layout
Relearn CSS layout. Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Laravel
Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
Polypane
Develop, debug and test websites and apps twice as fast. Know for sure your sites and apps work everywhere and for everyone.
Modern JavaScript
How it's done now. From the basics to advanced topics with simple, but detailed explanations.
Open Source Guide
Open source software is made by people just like you. Learn how to launch and grow your project.
CodePen
CodePen is a social front-end development environment. Write code in the browser, and see the results of it as you build. Browse the community to find inspiration and MIT licensed code snippets.
What The Flexbox?!
A simple, free 20 video course that will help you master CSS Flexbox! Created by Wes Bos.