https://github.com/nousantx/code-to-image-generator

Simple image generator with tenoxui classes.
https://github.com/nousantx/code-to-image-generator

css css-framework dom-to-image fast image image-generator javascript preact svg website

Last synced: 7 days ago
JSON representation

Simple image generator with tenoxui classes.

• Host: GitHub
• URL: https://github.com/nousantx/code-to-image-generator
• Owner: nousantx
• Created: 2024-11-14T06:28:46.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-19T14:33:32.000Z (about 1 month ago)
• Last Synced: 2025-01-13T04:36:23.496Z (15 days ago)
• Topics: css, css-framework, dom-to-image, fast, image, image-generator, javascript, preact, svg, website
• Language: JavaScript
• Homepage: https://nsx-code-to-image.web.app
• Size: 209 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

    

  



# Image Generator

A very lightweight and simple code-to-image generator. You can use every CSS properties inside your element's class name or as html attributes or even use the predefined CSS property shorthands and it will converted into inline-styles.

The element will saved inside SVG's `foreignObject` before it got displayed on a canvas. It's easier to use inline-styles instead of using class names for the element. And that's where tenoxui do its magic, tenoxui will convert those class names, and the apply them to the element.

## Features

- **Inline-Style Based** - Use any CSS properties

- **Scaling** - Scale your image for better resolution

- **Output Image** - Save the image to PNG, JPEG, WebP, SVG or PDF (image)

- **Save & Load** - Save your current code to a json file and load them later

- **Templates** - Use various starter templates

## Example

To add a simple box, you can just write something like this :

```html



```


Or use predefined shorthands :

```html



```