
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
@cloudquery/plugin-config-ui-lib
Advanced tools
Plugin configuration UI library for CloudQuery Cloud App
A comprehensive library for building CloudQuery plugin configuration UIs with minimal effort.
The fastest way to create a new plugin UI is to use the CLI generator:
npx --legacy-peer-deps @cloudquery/plugin-config-ui-lib
This command runs the interactive generator that creates a complete plugin UI project with all necessary files and dependencies.
The generator will prompt you for:
After answering these questions, the generator creates a complete UI project in a cloud-config-ui
directory with:
Initializes the form with values from CloudQuery:
const { initialValues, initialized, teamName, context, isDisabled } =
useFormInit(pluginUiMessageHandler);
The main wrapper component that provides context to all child components:
<PluginContextProvider
config={config}
teamName={teamName}
getTablesData={getTablesData}
hideStepper={context === 'wizard'}
pluginUiMessageHandler={pluginUiMessageHandler}
initialValues={initialValues}
isDisabled={isDisabled}
>
{/* Your plugin UI components */}
</PluginContextProvider>
The main form component that handles the entire UI:
<ConfigUIForm
container={container}
prepareSubmitValues={prepareSubmitValues}
/>
Should be rendered only when initialized
is true
.
Defines your plugin's configuration structure, including authentication methods, steps, and form fields:
export const useConfig = ({ initialValues }) => ({
name: 'my-plugin',
type: 'source',
label: 'My Plugin',
docsLink: 'https://hub.cloudquery.io/plugins/source/myteam/my-plugin/latest/docs',
iconLink: 'images/logo.png',
auth: [AuthType.OAUTH, AuthType.OTHER],
steps: [
{
title: 'Connect',
children: [
// Form sections and components
]
}
],
// Optional guide configuration
guide: { /* guide configuration */ }
});
You can customize the form by defining sections and components in the useConfig
hook:
{
component: 'section',
title: 'Authentication',
children: [
{
component: 'control-text-field',
name: 'api_key',
label: 'API Key',
required: true
}
]
}
You can conditionally show sections or fields:
{
component: 'section',
title: 'Advanced Settings',
shouldRender: (values) => values.show_advanced === true,
children: [/* components */]
}
Use Yup schemas for validation:
{
component: 'control-text-field',
name: 'api_key',
label: 'API Key',
schema: yup.string().when('_step', {
// Only validate on step 1
is: 1,
then: (schema) => schema.required('API Key is required')
})
}
After generating your UI:
cd cloud-config-ui
npm start
This starts a development server where you can test your plugin UI locally.
The generator includes unit tests:
npm run test
or in watch mode
npm run test:watch
npm run build
This creates optimized production files in the dist
directory that can be deployed to CloudQuery.
FAQs
Plugin configuration UI library for CloudQuery Cloud App
The npm package @cloudquery/plugin-config-ui-lib receives a total of 241 weekly downloads. As such, @cloudquery/plugin-config-ui-lib popularity was classified as not popular.
We found that @cloudquery/plugin-config-ui-lib demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.