penpot/penpot-export

Devtool to export the design tokens of a Penpot file to CSS, SCSS or JSON files

Website • Getting Started • User Guide • Tutorials & Info • Community

Youtube • Peertube • Linkedin • Instagram • Mastodon • X

video-hero-homepage_v5.webm

Penpot is the first open-source design tool for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast. And all of this with no handoff drama.

Penpot is available on browser and self host. It’s web-based and works with open standards (SVG, CSS and HTML). And last but not least, it’s free!

Penpot’s latest huge release 2.0, takes the platform to a whole new level. This update introduces the ground-breaking CSS Grid Layout feature, a complete UI redesign, a new Components system, and much more. Plus, it's faster and more accessible.

🎇 Penpot Fest is our design, code & Open Source event. Check out the highlights from Penpot Fest 2023 edition!

Table of contents

• Why Penpot
• Getting Started
• Community
• Resources
• License

Why Penpot

Penpot expresses designs as code. Designers can do their best work and see it will be beautifully implemented by developers in a two-way collaboration.

Designed for developers

Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play "solo".

Inspect mode

Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code.

Self host your own instance

Provide your team or organization with a completely owned collaborative design tool. Use Penpot's cloud service or deploy your own Penpot server.

Integrations

Penpot offers integration into the development toolchain, thanks to its support for webhooks and an API accessible through access tokens.

What’s great for design

With Penpot you can design libraries to share and reuse; turn design elements into components and tokens to allow reusability and scalability; and build realistic user flows and interactions.

Getting started

Install with Elestio

Penpot is the only design & prototype platform that is deployment agnostic. You can use it or deploy it anywhere.

Learn how to install it with Elestio and Docker, or other options on our website.

Community

We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and improve Penpot. All your designs, code and ideas are welcome!

If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, join our Community!

You will find the following categories:

• Ask the Community
• Troubleshooting
• Help us Improve Penpot
• #MadeWithPenpot
• Events and Announcements
• Inside Penpot
• Penpot in your language
• Design and Code Essentials

Contributing

Any contribution will make a difference to improve Penpot. How can you get involved?

Choose your way:

• Create and share Libraries & Templates that will be helpful for the community
• Invite your team to join
• Star this repo and follow us on Social Media: Mastodon, Youtube, Instagram, Linkedin, Peertube and X.
• Participate in the Community space by asking and answering questions; reacting to others’ articles; opening your own conversations and following along on decisions affecting the project.
• Report bugs with our easy guide for bugs hunting or GitHub issues
• Become a translator
• Give feedback: Email us
• Contribute to Penpot's code: Watch this video by Alejandro Alonso, CIO and developer at Penpot, where he gives us a hands-on demo of how to use Penpot’s repository and make changes in both front and back end

To find (almost) everything you need to know on how to contribute to Penpot, refer to the contributing guide.

Resources

You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project.

💾 Documentation

🚀 Getting Started

✏️ Tutorials

🏘️ Architecture

📚 Dev Diaries

License

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) KALEIDOS INC

Penpot is a Kaleidos’ open source project

penpot-export's Issues

Consider improving penpot-export CLI

Description

penpot-export has a single CLI command with no options, penpot-export.

It always requires a user configuration file to work.

Expected output

Consider adding a parameter to provide an alternative user configuration file. E.g. penpot-export -c ../my-other-project/penpot-export.config

Consider improving the user experience by providing a way to execute simple cases with only commands and no configuration file. E.g. penpot-export -h https://my-instance.penpot/ -t $AUTH_TOKEN typographies -f $PENPOT_FILE_UUID -o src/styles/typographies.css

Resources

commander, for usual CLI command options: https://www.npmjs.com/package/commander (autogenerates help commands!)

inquirer, for an interactive CLI program (a configuration generator?): https://www.npmjs.com/package/inquirer 

Fix ES modules interoperability in penpot-export

Description

Currently, a node.js project that declares "type": "module" in the package.json can't use penpot-export with a configuration file.

$ penpot-export
/Users/redradix/Taller/kaleidos-easyfest/penpot-export/packages/cli/dist/bin/index.js:16
var config = require(configFilePath);
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/redradix/Taller/kaleidos-easyfest/easyfest/frontend/penpot-export.config.js from /Users/redradix/Taller/kaleidos-easyfest/penpot-export/packages/cli/dist/bin/index.js not supported.
penpot-export.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename penpot-export.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/redradix/Taller/kaleidos-easyfest/easyfest/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.<anonymous> (/Users/redradix/Taller/kaleidos-easyfest/penpot-export/packages/cli/dist/bin/index.js:16:14) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.16.1

This is due to node.js require() interpreting that the .js file is an ES module, even though it's not.

Renaming the configuration file with the .cjs extension won't work, because penpot-export is limited to the exact name of that config. Also, actually writing an ES module in penpot-export.config.js won't work either; it's an issue with the loader.

Workaround

There's a workaround for UNIX systems: 

$ mv penpot-export.config.js penpot-export.config.cjs
$ ln -s penpot-export.config.cjs penpot-export.config.js

Expected outcome

penpot-export is able to read configuration files written as CommonJS in a ES modules project, or written as ES module in a CommonJS project.

Opportunity

Consider implementing a more flexible configuration system with cosmicconfig (used by Prettier): https://github.com/cosmiconfig/cosmiconfig

This could be an opportunity to implement a CLI option to load configuration files other that penpot-export.config.js.

Decouple core from side-effects

Description

@penpot-export/core currently logs to the console and write files, without any way to control that behaviour for the consumer.

This may be undesired for some use-cases. E.g. someone that wants to hook into the file before it's written to use PostCSS or CSSTree or apply any transformation.

Expected output

Move logging to the CLI. This could be made injecting a logger function. But I'll just prefer to use a generator function in core and use message passing with the CLI, then let the CLI log the way it wants.

Return file contents instead of writing files directly. Expose a function to write files, if the logic happens to be non-trivial. When written as a generator function, each file will be another message yielded. The file path configuration won't be required.

Opportunity

Using a generator function will allow the core transformation to be treated as a thread, and a consumer (like the CLI) will gain great abilities like pause and resume execution at will. This may be used to make the generation interactive or quiet, or expose some user hooks.