neneui_render 1.0.0

Render NeneUI interface definitions as native Flutter widgets.

Nene UI Runtime

(Build Flutter interfaces dynamically from a JavaScript server with WebSocekt and Dynamic Widgets Support!)

Docs

Don't know what to do Or how to use NeneUI? Access the Documentation of NeneUI Below!

Video Demo

Watch the Video on YouTube

Dont worry! this is not dQw*****Q Link

Features

• Server-driven UI
• JavaScript backend (TypeScript)
• Natively Rendered Flutter Widgets (No WebView)
• Widgets Manipulation with Callbacks
• Embedded JavaScript Runtime
• Update Apps without Recompilation

Server-Side Code	Rendered UI
Server-Side Code	Rendered UI

Getting Started

Requirements

• Flutter SDK (3.38.6 or above)
• Bun.sh 1.3.x
• C++, GCC Compiler : Desktop C++ Development (For Windows)
• Android SDK/Android Studio (For Android)
• Dart & Flutter Knowledge
• internet
• pc...

Psst! (Can't Compile?)

In case you don't have Flutter SDK Installed or don't wannta compile things, you can try out the modications you made in example_ui in NeneUI Testing Kit

NeneUI Testing Kit (In Case You cannot find) **

Latest NeneUI Testing Kit (WEB) *

(*) This Version of NeneUI Testing Kit is hosted on Web so expect HTTPS, and other CORS related issues when opening any app + it is updated everytime so don't expect Stable NeneUI Too!

(**) nothing, you need to search in release for the Testing Kit for your Platform.

Note: The Testing Kit also has Debug Bar to Debug Variables or Change Stuff and Refresh UI Interface

Getting Started With an Sample

Clone the Sample Repo

git clone https://github.com/kwe26/neneui-sample.git sample

Install The Packages For Bun and Flutter

cd sample && bun install

Compile the Flutter App Linking to NeneUI

cd flutter_app && flutter pub get

Run the Server

bun run index.ts

Run The Flutter App

The Backend must be running at localhost:3500 or you can change it too. Recommended Platforms: Windows, Linux, Android only! (Not tested with Web, macOS, iOS)

flutter run

Tweaking

sample/example_ui/home.ts You can modify the UI and Add More Widgets and test the Library

Test Library

cd ./flutter_render/example && flutter run -d

FAQ

1. Linux Build won't compile and error out

It is caused due to the quickjs_engine missing a critical header for Linux The fix is below

find "$HOME/.pub-cache" -name "quickjs_engine_plugin.h" -exec sed -i \
            's/#include <flutter_linux\/flutter_linux.h>/#include <flutter_linux\/flutter_linux.h>\n\n#ifndef FLUTTER_PLUGIN_EXPORT\n#ifdef FLUTTER_PLUGIN_IMPL\n#define FLUTTER_PLUGIN_EXPORT __attribute__((visibility("default")))\n#else\n#define FLUTTER_PLUGIN_EXPORT\n#endif\n#endif/' {} +

2. I Cannot Insepect Element in Web version of NeneUI

As of now, NeneUI uses Flutter to render in Web as well, So not only you can not do Inspect Element but some SEO features will be missing too (unless, Q4)

3. I added a Widget in my Code, But it won't show up even if i have restarted?

You must check whether your neneui_render Package is up-to-date with @neneys/ui. If you are trying on NeneUI Testing Kit, Make sure it's up-to-date as well.

4. How to get SEO Features on NeneUI Web?

You can get SEO features on NeneUI Web by using the NeneServer's PHP Renderer which renders the NeneUI content as HTML for Web Crawlers. For more information, Check out SEO Setup Docs

5. NeneUI Testing Kit wont run on my Linux machine!!?

You may need to install some dependencies like libmpv-dev for it to work properly.

Links & Credits

• Documented Widgets
• Web Tester
• neneui_render on pub.dev
• Sample App
• shadcn_ui Flutter Lib used for UI Components
• Figma Assets File
• TBHK for Nene Yashiro and Hananene Arts