# Isomorphic Crystal GUI : Alpha version

**URL:** <https://forum.crystal-lang.org/t/isomorphic-crystal-gui-alpha-version/5018>\
**Category:** News\
**Created:** [October 17, 2022, 10:49am UTC](https://forum.crystal-lang.org/t/isomorphic-crystal-gui-alpha-version/5018 "2022-10-17T10:49:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![serge-hulne](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.crystal-lang.org/serge-hulne/32/1211_2.png) [@serge-hulne](https://forum.crystal-lang.org/u/serge-hulne)\
**Post date:** [October 17, 2022, 10:49am UTC](https://forum.crystal-lang.org/t/isomorphic-crystal-gui-alpha-version/5018/1 "2022-10-17T10:49:42Z")

</div>

The aim is to provide a portable GUI library which will allows developers to code desktop apps in Crystal.

- One goal is to make it as easy to use as Tkinter for Python.
- Another goal is portability across platforms (Linux, Mac, Windows)
- Another goal is to make it easy to distribute : The only dependency is Webview for Crystal. The app is simply one (binary executable) file.
- The library uses Crystal, HTML, CSS and Webmin, but developers using the library only need to master Crystal (no HTML, CSS, JS knowledge required).

> **[GitHub - serge-hulne/Isomorphic-crystal: GUI lib for Crystal-lang allowing...](https://github.com/serge-hulne/Isomorphic-crystal)**
>
> GUI lib for Crystal-lang allowing for developing simple desktop apps using Crystal only. Zero dependencies. - GitHub - serge-hulne/Isomorphic-crystal: GUI lib for Crystal-lang allowing for develop...

GUI lib for Crystal-lang allowing for developing simple desktop apps using Crystal only. Zero dependencies.

```auto
# ===========================
# Pages (Structure/interface)
# ===========================

def root_frame
    interface = Gui::Frame.new(title:"My new app")
    interface.append(Div.new("This is a est"))
    
    entries = [
        FormEntry.new("First Name", "fname"),
        FormEntry.new("Last Name", "lname"),
    ]

    action = FormAction.new("Get Name", "get_name")

    form = Form.new(entries, action)

    interface.append(form)
    hint = Hint.new("This is a hint")
    interface.append(hint)
    interface.render
end

```

---

<div class="post-metadata">

**Author:** ![DustinCSWagner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.crystal-lang.org/dustincswagner/32/1786_2.png) [@DustinCSWagner](https://forum.crystal-lang.org/u/DustinCSWagner)\
**Post date:** [October 17, 2022, 9:47pm UTC](https://forum.crystal-lang.org/t/isomorphic-crystal-gui-alpha-version/5018/2 "2022-10-17T21:47:33Z")

</div>

This looks nice, I’ll give it a try - Thanks!

---

<div class="post-metadata">

**Author:** ![rogerdpack](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.crystal-lang.org/rogerdpack/32/117_2.png) [@rogerdpack](https://forum.crystal-lang.org/u/rogerdpack)\
**Post date:** [October 18, 2022, 4:13am UTC](https://forum.crystal-lang.org/t/isomorphic-crystal-gui-alpha-version/5018/3 "2022-10-18T04:13:04Z")

</div>

Bind example might be nice somewhere, cheers!

---

<div class="post-metadata">

**Author:** ![serge-hulne](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.crystal-lang.org/serge-hulne/32/1211_2.png) [@serge-hulne](https://forum.crystal-lang.org/u/serge-hulne)\
**Post date:** [October 18, 2022, 4:31am UTC](https://forum.crystal-lang.org/t/isomorphic-crystal-gui-alpha-version/5018/4 "2022-10-18T04:31:03Z")

</div>

# Back end

```auto
require "kemal"
require "webview"

# ============
# Settings
# ============

# App params
IP = "127.0.0.1"
PORT = 3000
WIDTH = 800
HEIGHT = 600
TITLE = "My new app"

# ======
# Server
# ======

spawn do

    Kemal.config.port = (ENV["PORT"]? || PORT).to_i
    Kemal.config.host_binding = ENV["HOST_BINDING"]? || "#{IP}"
    #Kemal.config.env = "production"

    # =======
    # Actions
    # =======

    get "/root" do
        root_frame
    end

    post "/get_name" do |env|
        # fetchn form data
        x = env.params.body["fname"].as(String)
        y = env.params.body["lname"].as(String)
        # sending response to client
        <<-HTML
          #{root_frame} Data:<form>#{x}<br>#{y}</form>
        HTML
    end

    Kemal.run
end

# ========
# Client
# ========

wv = Webview.window(WIDTH, HEIGHT, Webview::SizeHints::NONE, 
"#{TITLE}", 
"http://#{IP}:#{PORT}/root")

wv.run
wv.destroy

```

# Front end

```auto
# ===========================
# Pages (Structure/interface)
# ===========================

def root_frame
    interface = Gui::Frame.new(title:"My new app")
    interface.append(Div.new("This is a est"))
    
    entries = [
        FormEntry.new("First Name", "fname"),
        FormEntry.new("Last Name", "lname"),
    ]

    action = FormAction.new("Get Name", "get_name")

    form = Form.new(entries, action)

    interface.append(form)
    hint = Hint.new("This is a hint")
    interface.append(hint)
    interface.render
end

```