studio icon indicating copy to clipboard operation
studio copied to clipboard

what is the editor iframe for

Open celevra opened this issue 9 months ago • 12 comments

Hi,

on a onpremise system the client embeds an iframe:

<iframe id="editor" src="https://studio.outerbase.com/embed/mysql"></iframe>

why is it needed?

regards

celevra avatar Feb 26 '25 21:02 celevra

Hello! Studio is a comprehensive database GUI that can be embedded via an iframe. While I'm not sure what your client used it for, it is typically used as a data explorer for interacting with an existing database.

Our embedded studio is secure, and we do not have access to any credentials. Here's how it works: users can embed our studio, which functions purely as a user interface. The studio sends the necessary SQL queries via postMessage to the parent system. The parent system then handles the response and returns the result. This means no credential information is transmitted to our UI at any point.

invisal avatar Feb 26 '25 23:02 invisal

Yes but the Data. So the gui is not open source and not hostable in a data privacy focused way? Is it the same with the Desktop client? Not working offline?

celevra avatar Feb 26 '25 23:02 celevra

The GUI is open source. This repo is the open of the GUI. If you want to host your own GUI, you can do

via Docker First clone the project. Then, you can build docker build -t image-name . then run the image. The GUI is running on the port 3000.

Run via source code You can run directly on our source code. Clone this project. Run npm run dev.

Then in CLI you can do create outerbase.json file

{
  "driver": "mysql",
  "connection": {
    "database": "xxx",
    "host": "xxxx",
    "port": 3306,
    "user": "xxxx",
    "password": "xxx"
    "studio": "your_path_to_your_self_host_studio"
  }
}

Then run

npx @outerbase/studio

It will use the config from the outerbase.json.

I might add better CLI to support this use-case in the future such as npx @outerbase/studio mysql://xxxx. --studio your_private_hosted_studio

invisal avatar Feb 26 '25 23:02 invisal

Awesome, will try that, thank you very much

celevra avatar Feb 26 '25 23:02 celevra

Let me know if you hit any problem. Not many people are interesting in self-host it that why I haven't focused on making self-host easy. But if there is valid use-case, I will try to improve this kind of use-case experience.

Are you using it to just view your MySQL or are using it expose MySQL interface outside? Feel free to reach out

invisal avatar Feb 26 '25 23:02 invisal

We have an internal application for managing systems, assets, tickets, invoices and so on. From time to time we need sql views that are not implemented in the tool and are not that much used that it would make sense to implement. So i want to integrate your tool so that we can directly query the database and do not need to ssh and use the mysql cli, i will send a screenshot when i have embedded it

celevra avatar Feb 27 '25 05:02 celevra

"studio": "your_path_to_your_self_host_studio"

is it enough to set it to http://localhost:3000 ? if i visit localhost:3000 after npm run dev i get the Project website and if i open 4000 after run npx it still embedds the public client

celevra avatar Feb 27 '25 07:02 celevra

@celevra You need to put

"studio": "http://localhost:3000/embed"

invisal avatar Feb 27 '25 11:02 invisal

@invisal thank, tried that without luck:

rmm outerbase # npm run dev

> @libsqlstudio/[email protected] dev
> next dev -p 3008

   ▲ Next.js 15.1.4
   - Local:        http://localhost:3008
   - Network:      http://xxx:3008

 ✓ Starting...
 ✓ Ready in 3.3s
rmm outerbase # cat outerbase.json 
{
  "driver": "mysql",
  "connection": {
    "host": "xxx",
    "port": 3306,
    "user": "viewer",
    "password": "xxx",
    "studio": "http://localhost:3008/embed"
  }
}
rmm outerbase # npx @outerbase/studio
No configuration specified. Attempt to load config from outerbase.json
outerbase.json found. Loading from it
╔══════════════════════════════════════════════╗
║                                              ║
║    Serving!                                  ║
║    - Local:    http://localhost:4000         ║
║    - Network:  http://157.90.251.242:4000    ║
║                                              ║
╚══════════════════════════════════════════════╝
Press q | shutdown the server

still:

Image

celevra avatar Feb 27 '25 11:02 celevra

Got it. Let me test and let you know

invisal avatar Feb 27 '25 12:02 invisal

I also noticed this. Assuming this is going to stay open sourced, I'd really like a way to run this on k8s without any iframes or API calls to an external service under the hood. Seems like publishing a docker image would be the easiest approach but, I may be wrong.

jdoiro3 avatar Jun 19 '25 20:06 jdoiro3

I am also in, i think will be nice to have full offline experience, in cases no internet connection and by the fact using it for sqlite suppose to have ability to work locally without connection.

Also I am a bit worried about the telemetry it sends and because I didn't notice any way to disable it.

It logs everything I am doing like

{"events":[{"name":"evt_query_execute","data":{"sql":"SELECT","type":"SELECT"}},{"name":"evt_rows_queried","data":{"count":7}}]}
{"events":[{"name":"page_view","data":{"path":"/embed/sqlite","tab":"table","tab_key":"table-main-article"}}]}
{"events":[{"name":"page_view","data":{"path":"/embed/sqlite","tab_key":"_schema_newtable1"}}]}

It's not just usage statistics but also info about table names and records in there

lthi747 avatar Aug 02 '25 08:08 lthi747