Feature Request: Export to HTML Plugin

Hello! I ran across a Figma plugin that could export a project into HTML and CSS, and found other community plugins that do the same:

I would love to see a similar plugin or feature in Penpot for those of us who design websites.

8 Likes

Here are more similar Figma plugins (the forum blocked me from posting the rest because I’m a new user):

It’s quite a popular plugin in the Figma community, would be happy to see this later on in the future in the Penpot community.

1 Like

@candidexmedia: What would you like to use the plugin for? (To export the project for testing as a file, provide a code foundation for HTML code, use figma as HTML editor etc.)

For Figma, I believe it’s used to provide a code foundation for HTML code. So, someone could design a landing page on Penpot, export the board as HTML + CSS, make some changes, and host the files on a static site server like Netlify or GitHub pages. This could be useful for those who wants to quickly test website ideas, design and host landing pages, and/or have limited web development skills.

Canva has started offering a visual site creation function, but you can’t export the HTML + CSS from the app.

1 Like

Personally, after having the approval of my design, I’d like to create snippets of code I then use as widgets inside of tools like Grafana for example.
Having a simple HTML and CSS export from Penpot would be super valuable

3 Likes

Just wanted to update this thread with an example from another design app:

Lunacy recently introduced Linked Designs, which allows to edit and update the appearance of live web pages from the design app:


Here are the steps they describe:

  1. Copy the link to the CSS file in Lunacy and add it to your HTML document. Stick to the CSS styles and color variables in the code.
  2. Write a JS script for fetching the JSON file with text content key/value pairs and a function that will output text by key values. Add texts to your HTML document using this function and respective keys.
  3. Add raster images as PNG links to our Lunacy cloud (covered by CDN).
  4. Embed other graphic content as SVGs.
3 Likes

Just to add as I am currently building a project workflow with figma to react, and since penpot is working on figma import, I have notice an open source repo figma-api-demo/figma-to-react at master · figma/figma-api-demo · GitHub which could maybe be useful to build something similar for penpot

1 Like

It would be really nice to have this. Looking forward to testing it :grinning:

2 Likes

I noticed the main guy at Teleport HQ (Paul Brie) mentioned Penpot in their Discord channel and how they are looking into it and that:

“The plugin is not open-source (yet). We don’t have a Penpot integration (yet).”

Which is a very very good sign as Teleport HQ is an amazing product!!

1 Like

Hi, I’m also interested in having a plugin to export my design not only to HTML+CSS, but also to Bootstrap or Materialize or any other.

I have read the forum and I have not found any work in progress on this. If there is one, please let us know.

I don’t have much experience in design, but I work for a company that has a UI designer and I am a programmer with lots of experience in programming, although I have never programmed in Clojure.

So far so good.

We would like to contribute to this project with an external tool (as we can’t program it in .clj) to export a penpot board to HTML+CSS.

Maybe we can do it in PHP or C++ and then you can port it to .clj or call from penpot to PHP or the c++ executable.

Not knowing penport in deep as we have used it only for a few weeks, I think the process would be something like this:

  1. Export the penpot board to a temporary .svg file
  2. Call our php or c++ program that:
    2.1) Reads the .svg file
    2.2) Reads a definitions/transformations file from elements in svg to elements in HTML + CSS
    2.3) Writes the HTML and CSS files
  3. Sends the HTML and CSS files to the user (probably zipped)

The programming of this is fairly simple, the main workload being the creation of the definitions/transformations file. I hope you already have something done and/or you can take over that task.

We are into a project that finishes by the end of the year, so our resources will not be available after that.

Should you find this proposal interesting, please let us know.

Cheers

Related request, but for slides.js: Render boards using reveal.js

FYI, I was just able to get chatgpt 4 to produce reasonable looking html and css by pasting in a screenshot. I was specifically interested in the slide designs since I actually want to make slides in markdown with marp or pandoc but have some options for nicer design.

It looks like the upcoming version of Penpot will include HTML and CSS export!!