# HTML/CSS UI on GLFW windows

**URL:** <https://discourse.glfw.org/t/html-css-ui-on-glfw-windows/1544>\
**Category:** share\
**Created:** [April 23, 2020, 5:13pm UTC](https://discourse.glfw.org/t/html-css-ui-on-glfw-windows/1544 "2020-04-23T17:13:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![c-smile](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.glfw.org/c-smile/32/331_2.png) [@c-smile](https://discourse.glfw.org/u/c-smile)\
**Post date:** [April 23, 2020, 5:13pm UTC](https://discourse.glfw.org/t/html-css-ui-on-glfw-windows/1544/1 "2020-04-23T17:13:07Z")

</div>

For quite some time I am publishing so called Sciter.Lite version of [Sciter Engine](https://sciter.com) on the site and on GitHub.

Sciter.Lite allows to render UI defined as HTML/CSS and optionally script on surface GLFW windows. Sciter SDK has demo project of how to bind GLFW / OpenGL and Sciter.

Here is screenshot of that demo application:

 ![Screenshot from 2020-04-23 10-03-57](https://canada1.discourse-cdn.com/flex035/uploads/glfw/original/1X/d53d18cfcc1d1f7202dea5c25abf05ba71a05d46.png)

Sciter supports layered output where pure OpenGL primitives rendering is sandwiched between background and foreground HTML/CSS layers. See this [article and movie](https://sciter.com/sciter-and-directx/) ( while it is about DirectX, with GLFW principles are the same).

In GLFW context Sciter can render its stuff as on OpenGL directly as on bitmap. Internally Sciter.Lite uses Skia as a graphics backend. And for the note “Big” Sciter can use DirectX/Direct2D, CoreGraphics (on Mac) and Cairo (on GTK).

For the note: Sciter API exposes sciter::graphics API, see: sciter-x-graphics.hpp ) for the cases when standard HTML/CSS rendering is not enough. So your native code can use this set of anti-aliased 2D rendering primitives directly.

Hope it will be useful for someone.

---

<div class="post-metadata">

**Author:** ![c-smile](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.glfw.org/c-smile/32/331_2.png) [@c-smile](https://discourse.glfw.org/u/c-smile)\
**Post date:** [May 7, 2020, 4:03pm UTC](https://discourse.glfw.org/t/html-css-ui-on-glfw-windows/1544/2 "2020-05-07T16:03:25Z")

</div>

Associated question:

Is it possible in GLFW to create two separate OpenGL context for the same window?

Windows specific code as an example:

```
HDC hdc; 
HGLRC hglrc1, hglrc2; 
 
// create a rendering context  
hglrc1 = wglCreateContext (hdc); 
hglrc2 = wglCreateContext (hdc); // not sure if Windows supports that by default. 

wglShareLists(hglrc1,hglrc2);

```

So two independent drawing systems can be used in two different layers:

```
// make it the calling thread's current rendering context 
wglMakeCurrent (hdc, hglrc1);
 
// call Sciter's paint here
 
wglMakeCurrent (hdc, hglrc2);

// call your paint here

// Done, swap buffers

SwapBuffers(hdc);
// or wglSwapLayerBuffers(hdc) if OpenGL layers are used.
```

---

<div class="post-metadata">

**Author:** ![dougbinks](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.glfw.org/dougbinks/32/39_2.png) [@dougbinks](https://discourse.glfw.org/u/dougbinks)\
**Post date:** [May 7, 2020, 9:44pm UTC](https://discourse.glfw.org/t/html-css-ui-on-glfw-windows/1544/3 "2020-05-07T21:44:15Z")

</div>

Hi c-smile,

It’s currently not possible to create two separate OpenGL contexts for the same window.

I wouldn’t advise doing so even if you could, but for this feature request see:

> [@Fullscreen window blinking](https://discourse.glfw.org/t/fullscreen-window-blinking/1538/8):
>
> I wouldn’t call it a ‘trick’ - it is a robust and workable approach. I have submitted an issue for this: [https://github.com/glfw/glfw/issues/1687](https://github.com/glfw/glfw/issues/1687) However I am unsure adding to the GLFW API for this is a good idea given that there are other, perhaps better, solutions.

and

> <https://github.com/glfw/glfw/issues/1687>
>
> The following thread on discourse discusses a need for multiple contexts for a w…indow:
> https://discourse.glfw.org/t/fullscreen-window-blinking/1538/4
> 
> I am unsure about the overall benefit of multiple contexts for OpenGL these days, and I think it's best to keep GLFW as lean as possible, however this is something which is currently not possible to do with GLFW without altering core GLFW code so I think it's reasonable to consider.
> 
> Potential approaches:
> 
> 1. Expose the required OS specific information via the GLFW native API, for example on Windows WGL requires the device context \`window-\>context.wgl.dc\` which is not currently exposed. Users could then write their own OS specific code to create contexts.
> 2. Add \`GLFWUserContext\* glfwCreateUserGLContext(GLFWwindow\* window)\` and supporting functions, see below. I have named these User Contexts to differentiate from the GLFW context created along with the window.
> 
> For 2 we would need
> \`\`\`
> // Create a new context for a window
> GLFWUserContext\* glfwCreateUserGLContext(GLFWwindow\* window);
> 
> // Delete a context
> void glfwDestroyUserContext(GLFWUserContext\* context);
> 
> // Make a context current
> void glfwMakeUserContextCurrent(GLFWUserContext\* context);
> 
> // Get current context - returns NULL if primary window context is current,
> // in which case glfwGetCurrentContext would return window, and
> // glfwGetCurrentContext will return NULL if a user context is current.
> GLFWUserContext\* glfwGetCurrentUserContext(void);
> \`\`\`
> 
> I can create the Windows versions of the API, and sdegrande can help with the GLX and potentially Mac.
> 
> This is potentially related to #1501

Cheers,

Doug.

PS: It’s best to create separate threads for different issues in future, thanks!

---

<div class="post-metadata">

**Author:** ![c-smile](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.glfw.org/c-smile/32/331_2.png) [@c-smile](https://discourse.glfw.org/u/c-smile)\
**Post date:** [May 21, 2020, 5:48pm UTC](https://discourse.glfw.org/t/html-css-ui-on-glfw-windows/1544/4 "2020-05-21T17:48:36Z")

</div>

Thanks Doug,

I know how to do it without GLFW, just wanted to clarify that there is no such API in GLFW by default.
