Add HTML export target #40

Syogo-Suganoya · 2025-12-10T05:40:36Z

Introduced a new "Embed" option in the dropdown menu that allows users to copy an iframe code for embedding the keyboard layout. The code includes the keyboard image and metadata, and handles both modern and fallback clipboard copying methods. This enhances the sharing capabilities of the keyboard layouts.

Syogo-Suganoya · 2025-12-10T05:40:56Z

Summary

Adds an "Embed" export option that generates an iframe tag for embedding keyboard layouts in blogs or websites. The iframe code is copied to the clipboard for easy pasting.

Changes

New Export Option: Added "Embed" menu item in the Export dropdown (replaces "Download HTML")
Embed Code Generation: Generates a self-contained iframe tag with the keyboard layout embedded via srcdoc
Clipboard Integration: Copies the iframe code to the clipboard instead of downloading a file
Self-Contained Content: The keyboard image is embedded as a Data URL, so no external files are required

Implementation Details

The copyEmbedCode() function:
- Captures the keyboard canvas (including rounded background and matrix overlay if visible)
- Converts the canvas to a PNG Data URL
- Generates HTML content with keyboard metadata (name, author)
- Creates an iframe tag with the HTML embedded in the srcdoc attribute
- Copies the iframe code to the clipboard with a success notification

Usage

Users can click "Export" → "Embed" to copy an iframe tag that can be pasted directly into blog posts or websites. The iframe displays the keyboard layout with proper styling and includes attribution to Keyboard Layout Editor NG.

Technical Notes

The iframe uses srcdoc to embed the HTML content inline
HTML content is properly escaped for use in the srcdoc attribute
The generated HTML includes responsive styling and proper metadata
Falls back to document.execCommand('copy') for older browsers that don't support the Clipboard API

Demo

I'll also include the HTML used for testing the iframe.

Click to expand

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Iframe test</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      background: #f2f2f2;
    }

    #iframe-wrap {
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    iframe {
      width: 100%;
      border: none;
      display: block;
    }
  </style>
</head>
<body>

  <h1>Iframe test</h1>

  <div id="iframe-wrap">
    <!-- Insert the iframe here -->
  </div>

  <script>
    const frame = document.getElementsByTagName("iframe")[0];

    function resizeFrame() {
      const doc = frame.contentDocument || frame.contentWindow.document;
      frame.style.height = doc.documentElement.scrollHeight + "px";
    }

    frame.addEventListener("load", resizeFrame);
  </script>

</body>
</html>

Syogo-Suganoya · 2025-12-10T06:08:37Z

@adamws @eugenesvk
When you have a moment, could you please review this PR?
Thank you in advance!

Instead of a download HTML, I made it an embed button.
Since you wanted to embed it in your blog, I made it so you can copy the iframe and paste it directly into your blog.

github-actions · 2025-12-10T07:54:48Z

Preview deployment ready!

Preview URL: https://kle-kel7u8sap-adams-projects-465f639f.vercel.app

Built from commit: d16051c
View changes: Compare with master

eugenesvk · 2025-12-10T08:35:31Z

Thanks for looking into it, but it's not what I meant.

For be the huge benefit of html export is that it would human/machine parseable/searchable.

For example, I can save a local offline html cheatsheet and lookup a symbol via Ctrl+F.

Or embed html in a blog with the same properties, and then you could also attach extra style/tooltip/popup stuff since every button is a dedicated html entity.

For example, with a KLE html you can have a button that simply replaces all the QWERTY labels with DVORAK with a little script, it won't work with an embedded image

Syogo-Suganoya · 2025-12-10T11:56:50Z

Thanks for the clarification.

I’ll revise my approach based on your explanation and update the implementation.
Once I have the adjustments ready, I’ll drop another comment here.

adamws · 2025-12-10T13:00:37Z

To be on the same page,
the goal would be to generate html like this:

https://codepen.io/adamws/pen/JoXxJxO

each key is a div with style mimicking our canvas key appearance (In this codepen i took classes from original keyboard-layout-editor - our would be very similar)
each key has absolute position/rotation calculated from store layout (see how getKeyCenter is used - for positioning divs we might prefer using top left corner of a key)

This whole feature would basically become separate html based renderer (like the original keyboard-layout-editor had).
There will be some annoying edge cases to remember about: ISO enter (i.e. non-rectangular keys), styling ghosted/decal/step/home keys etc.

This is major feature. I'm not personally invested in it but I'm ok with adding it if implemented.

Syogo-Suganoya · 2025-12-11T12:25:32Z

@eugenesvk
I’d like to confirm a few things:

Is it acceptable for the output to be in an iframe format? The result would look like: <iframe srcdoc="..."></iframe>.
As long as the content is searchable with Ctrl+F, is that sufficient? It works as shown in the attached image.
Do I need to reproduce the design exactly, or is an approximate version acceptable?

eugenesvk · 2025-12-11T12:51:39Z

In the previous version iframe meant you had to scroll inside a window, right? If so, then a more plain html container would be better
yes, sure, as long as all labels are text and not images, that's fine! you can select an individual label, copy&paste, search for it etc. Unless I'm missing something and what you're showng is some trick where you can Ctrl+F text on an image, but then wouldn't be able to copy&paste it?
As long as I can densely fit the info (an example: here is a cheatsheet that can fill up to 9-10 of the 12 available labels (9 on top, 3 at a button side) https://www.keyboard-layout-editor.com/#/gists/537c5fed0748cb2cf889bab3ff866667) it's ok. In the old KLE I could to some extent narrow the margins to fit more data, KLE-NG is more limited in accepting styling, but if it's exported HTML then you could apply arbitrary styles yourself

Syogo-Suganoya · 2025-12-12T08:17:54Z

@eugenesvk
Instead of an iframe, we've implemented it to select “Download HTML”.
Therefore, copying is also possible.

Additionally, if you select “ANSI 104” in the presets
and execute “Download HTML”, HTML like the following will be generated:

keyboard-layout.html

I was able to implement the feature itself, but I don't think I'll be able to allocate any more time to testing and fixes.
Therefore, I'd like to leave this pull request as is for now.

Since it will be difficult to update this PR going forward,
it's fine to remove the issue assignment.

I apologize for the situation turning out this way.

github-actions · 2025-12-12T09:32:21Z

Preview deployment ready!

Preview URL: https://kle-9ub75r5e0-adams-projects-465f639f.vercel.app

Built from commit: d16051c
View changes: Compare with master

Syogo-Suganoya had a problem deploying to pr-approval December 10, 2025 05:40 — with GitHub Actions Failure

fix tiny

adb1013

Syogo-Suganoya temporarily deployed to pr-approval December 10, 2025 05:50 — with GitHub Actions Inactive

fix download HTML button

cf7f2a6

Syogo-Suganoya had a problem deploying to pr-approval December 12, 2025 04:15 — with GitHub Actions Failure

fix lint

16532ef

Syogo-Suganoya had a problem deploying to pr-approval December 12, 2025 04:29 — with GitHub Actions Failure

fix tiny

a9ab38f

Syogo-Suganoya had a problem deploying to pr-approval December 12, 2025 04:53 — with GitHub Actions Failure

fix tiny

e6ea20b

Syogo-Suganoya had a problem deploying to pr-approval December 12, 2025 06:40 — with GitHub Actions Failure

fix tiny

676370e

Syogo-Suganoya temporarily deployed to pr-approval December 12, 2025 07:28 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add HTML export target #40

Add HTML export target #40

Syogo-Suganoya commented Dec 10, 2025

Uh oh!

Syogo-Suganoya commented Dec 10, 2025 •

edited

Loading

Uh oh!

Syogo-Suganoya commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

eugenesvk commented Dec 10, 2025 •

edited

Loading

Uh oh!

Syogo-Suganoya commented Dec 10, 2025

Uh oh!

adamws commented Dec 10, 2025

Uh oh!

Syogo-Suganoya commented Dec 11, 2025

Uh oh!

eugenesvk commented Dec 11, 2025

Uh oh!

Syogo-Suganoya commented Dec 12, 2025

Uh oh!

github-actions bot commented Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add HTML export target #40

Are you sure you want to change the base?

Add HTML export target #40

Conversation

Syogo-Suganoya commented Dec 10, 2025

Uh oh!

Syogo-Suganoya commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Implementation Details

Usage

Technical Notes

Demo

Uh oh!

Syogo-Suganoya commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

eugenesvk commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Syogo-Suganoya commented Dec 10, 2025

Uh oh!

adamws commented Dec 10, 2025

Uh oh!

Syogo-Suganoya commented Dec 11, 2025

Uh oh!

eugenesvk commented Dec 11, 2025

Uh oh!

Syogo-Suganoya commented Dec 12, 2025

Uh oh!

github-actions bot commented Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Syogo-Suganoya commented Dec 10, 2025 •

edited

Loading

eugenesvk commented Dec 10, 2025 •

edited

Loading