Fix Velo API Docs UI (5min tutorial)

If you are coding with Velo you have probably seen that docs (API references) updated with new UI and it became just like Wix REST APIs UI.

But there are too much white space as well as it’s hard to read long code examples since we need to scroll in a small code block div/box.

In few steps you can fix this in your end via a chrome extension:

First install this extension: https://chromewebstore.google.com/detail/javascript-css-auto-injec/oakjdafonfdgbgbcofjpaecngfimohno?hl=en

And then click to the extension to create a script to run when a specific page loads in your browser:

image

  1. Click to extension icon and open the pop-up.
  2. Create a new script. (remove default JS and also remove the default CSS content)
  3. Paste the following URL to the URL part:

https://dev.wix.com/docs/velo/api-reference/

  1. Set next option to Inject On Page Loaded so it’ll automatically run when the page loads.
  2. Paste the CSS code below:
.code {
    overflow: auto !important;
}

.max-h-\[230px\] {
    max-height: none !important;
    min-height: 230px !important;
}

.max-w-screen-xl {
    /*max-width: none !important;*/
    max-width: 1440px !important;
}

You can play with this CSS code to make extra changes to UI if you want.

  1. Save the script and reload the page (it’ll only work in Velo docs).

And then you will be able to see that it has changed the UI of Velo API docs. Until Wix makes official changes you can use this small CSS code to change the existing UI.