Home/ Documentation/ Piny/ Piny Setup Guide: Before You Begin

Piny Setup Guide: Before You Begin

Piny runs directly in your IDE to visually edit Tailwind styling in Astro, React, and Next.js projects. Unlike Pinegrow Web Editor, Piny integrates with VS Code for dynamic JavaScript framework development.

What is Piny?

Piny is a visual editor for Astro, React, and Next.js projects using Tailwind CSS that runs directly inside your IDE (like Visual Studio Code). It is not Pinegrow Web Editor, which is a separate standalone desktop application but also a standalone plugin for WordPress for static HTML projects and WordPress theme development.

What is Piny Not?

It’s important to clearly understand what Piny is not.

  • Not for Static HTML Projects: Piny does not support editing static HTML sites or plain HTML files.
  • Not for WordPress Development: Piny cannot edit or create WordPress themes or plugins. Use Pinegrow Web Editor or the Pinegrow WordPress plugin instead.
  • Not a Pinegrow Replacement: Piny is not designed as a replacement for Pinegrow Web Editor, which handles static HTML, CSS, and WordPress theme projects. Piny complements Pinegrow by focusing specifically on Tailwind CSS styling within dynamic JavaScript frameworks.

Essential Prerequisites

Before attempting to use Piny, ensure you have:

  1. A compatible development environment:
  • A React, Next.js, or Astro project already set up
  • Tailwind CSS properly configured in your project
  • A functioning local development server
  1. A compatible IDE:
  • Visual Studio Code (recommended)
  • Other VS Code-based editors like Cursor or Windsurf
  1. Project structure requirements:
  • Standard React/Next.js/Astro project structure
  • JSX/TSX components that Piny can interpret

Important Limitations to Understand

  • Piny cannot edit basic HTML projects or static websites
  • Piny requires a dynamic JavaScript framework environment
  • Piny is specifically designed for Tailwind CSS styling (not vanilla CSS or other frameworks)
  • Visual Select feature requires additional script integration in your project

Quick Setup Steps

  1. Install the Piny extension from your IDE’s marketplace
  2. Open your existing React/Next.js/Astro project with Tailwind CSS
  3. For Visual Select (Pro feature), follow the specific setup instructions to add the required script to your project’s layout
  4. Right-click anywhere in your code and select “Edit in Piny” to begin

Remember: If you’re looking to edit static HTML or WordPress themes, you need Pinegrow Web Editor instead of Piny.