JPNAS.NET / Digital Resources

🌐 Web Design & Building

Free and open-source tools for designing and building websites: UI design, code editors, local environments, version control, and static site generators.

Open in the interactive Digital Resources

• Penpot

  penpot.app

  The first open-source web-based collaborative design and prototyping tool. Built with web standards, perfect for designers and developers working together.

  • #OPEN-SOURCE
  • #DESIGN
  • #PROTOTYPING
  • #UI/UX

• GrapesJS

  grapesjs.com

  A free and open-source Web Builder Framework that combines different tools and helper methods to help you create HTML templates without coding or with a visual builder.

  • #OPEN-SOURCE
  • #BUILDER
  • #FRAMEWORK
  • #TEMPLATE

• Lucide

  lucide.dev

  A free and open-source icon library with clean, consistent SVG icons. Easy to customize in size, color, and stroke width for any website or app.

  • #OPEN-SOURCE
  • #ICONS
  • #SVG
  • #DESIGN

• Google Fonts

  fonts.google.com

  A free library of open-source web fonts that you can use in any project. Self-host the font files if you want to avoid external requests.

  • #OPEN-SOURCE
  • #FONTS
  • #TYPOGRAPHY
  • #DESIGN

• VSCodium

  vscodium.com

  Free/libre open-source binaries of VS Code without telemetry and tracking. A privacy-focused alternative for web developers and programmers.

  • #OPEN-SOURCE
  • #EDITOR
  • #PRIVACY

• Notepad++

  notepad-plus-plus.org

  A free source code editor and Notepad replacement that supports multiple languages. Extremely fast, lightweight, and highly customizable with plugins.

  • #OPEN-SOURCE
  • #EDITOR
  • #LIGHTWEIGHT
  • #CODE

• Geany

  geany.org

  A lightweight, fast, and cross-platform text editor using the GTK toolkit. It provides a solid IDE-like environment without heavy resource usage.

  • #OPEN-SOURCE
  • #EDITOR
  • #LIGHTWEIGHT
  • #IDE

• XAMPP

  apachefriends.org

  A completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. Perfect for testing dynamic websites locally before deployment.

  • #OPEN-SOURCE
  • #LOCAL-SERVER
  • #PHP
  • #DATABASE

• DDEV

  ddev.com

  An open-source tool for running local PHP and Node.js development environments in containers. Reproducible setups for WordPress, Drupal, Laravel, and more.

  • #OPEN-SOURCE
  • #LOCAL-SERVER
  • #CONTAINERS

• Git

  git-scm.com

  A free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

  • #OPEN-SOURCE
  • #VERSION-CONTROL
  • #GIT
  • #COLLABORATION

• Node.js

  nodejs.org

  An open-source JavaScript runtime that powers most modern web build tools, bundlers, and package managers such as npm.

  • #OPEN-SOURCE
  • #JAVASCRIPT
  • #RUNTIME
  • #BUILD-TOOLS

• Hugo

  gohugo.io

  An open-source static site generator known for its speed. Builds complete websites from Markdown and templates in milliseconds, ready to host anywhere.

  • #OPEN-SOURCE
  • #STATIC-SITE
  • #GENERATOR

• Firefox Developer Edition

  mozilla.org

  A browser built specifically for developers, featuring advanced web development tools, CSS grid inspector, responsive design mode, and powerful debugging features.

  • #OPEN-SOURCE
  • #BROWSER
  • #DEBUGGING
  • #TESTING

• Visual Studio Code

  code.visualstudio.com

  A powerful, free source code editor developed by Microsoft with support for debugging, syntax highlighting, intelligent code completion, and a rich extension ecosystem.

  • #FREE
  • #EDITOR
  • #CODE

• Local

  localwp.com

  The free, local WordPress development tool designed to get your site up and running in seconds. Features automated SSL, mail trapping, and staging environments.

  • #FREE
  • #WORDPRESS
  • #LOCAL