# \[Early Preview\] CircleCI Config SDK + Visual Config Editor | Write config with code or drag and drop! **URL:** \ **Category:** Announcements\ **Tags:** visual-config-editor, dynamic-config, configuration, config-sdk\ **Created:** [October 19, 2021, 5:05pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984 "2021-10-19T17:05:17Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![KyleTryon](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/kyletryon/32/9977_2.png) [@KyleTryon](https://discuss.circleci.com/u/KyleTryon)\ **Post date:** [October 19, 2021, 5:05pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/1 "2021-10-19T17:05:17Z")
# CircleCI Config SDK + Visual Config Editor | Write config with code or drag and drop! * * * ## ⚠ The Config SDK and Visual Config Editor are now available in G.A.! > [@CircleCI Config SDK | Now G.A!](https://discuss.circleci.com/t/circleci-config-sdk-now-g-a/45457): > > We’re excited to show off some big improvements we’ve made to our [Config SDK](https://github.com/CircleCI-Public/circleci-config-sdk-ts). The config SDK is an open source TypeScript library that you can use to write and manage your CircleCI config.yml files using TypeScript and Javascript. Try it yourself or check out our[blog](https://circleci.com/blog/config-sdk/) to learn more about how you can use the Config SDK to “templatize” configs to centrally manage and update multiple projects that require the same CI configuration. Feel free to leave any feedback here or to contribute t… > [@Visual Config Editor for CircleCI is now "GA"](https://discuss.circleci.com/t/visual-config-editor-for-circleci-is-now-ga/45126): > > The Visual Config Editor is now GA We’ve made huge improvements to our [Visual Config Editor](https://circle.ci/visual-config-editor). Try it yourself or checkout our [blog](https://circleci.com/blog/visual-config-editor) to learn more about how the VCE can accelerate your next project’s CI pipeline. Feel free to leave any feedback here or to contribute to the [open source project](https://github.com/CircleCI-Public/visual-config-editor). [https://circle.ci/visual-config-editor](https://circle.ci/visual-config-editor)[https://github.com/CircleCI-Public/visual-config-editor](https://github.com/CircleCI-Public/visual-config-editor) The information below is now outdated. * * * The Community and Partner Engineering team at CircleCI is announcing two new open-source projects available in Early Access preview today! ⚠ _During the preview period frequent and potentially breaking changes are expected_ # Table Of Contents - [Visual Config Editor](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984#visual-config-editor-3) - Visually drag and drop CircleCI config elements on a node-graph editor and generate your CircleCI config YAML at the click of a button. - [CircleCI Config SDK](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984#circleci-config-sdk-4) - Create and manage your CircleCI config with JavaScript and TypeScript (More languages coming soon). # Visual Config Editor Edit: Aug/18/22 The Visual Config Editor is now Generally Available. Read more here: [Visual Config Editor for CircleCI is now "GA"](https://discuss.circleci.com/t/visual-config-editor-for-circleci-is-now-ga/45126) # CircleCI Config SDK Create and manage your CircleCI config with JavaScript and TypeScript (More languages coming soon). * * * GitHub Repo: [GitHub - CircleCI-Public/circleci-config-sdk-ts: Generate CircleCI Configuration YAML from JavaScript or TypeScript. Use Dynamic Configuration and the Config SDK together for live generative config.](https://github.com/CircleCI-Public/circleci-config-sdk-ts) Docs: [Home · CircleCI-Public/circleci-config-sdk-ts Wiki · GitHub](https://github.com/CircleCI-Public/circleci-config-sdk-ts/wiki) API Docs: [@circleci/circleci-config-sdk](https://circleci-public.github.io/circleci-config-sdk-ts/) NPM Package: [https://www.npmjs.com/package/@circleci/circleci-config-sdk](https://www.npmjs.com/package/@circleci/circleci-config-sdk) * * * ## Example ```javascript const CircleCI = require('@circleci/circleci-config-sdk'); // Instantiate new Config const myConfig = new CircleCI.Config(); // Create new Workflow const myWorkflow = new CircleCI.Workflow('myWorkflow'); myConfig.addWorkflow(myWorkflow); // Create an executor instance // Executors are used directly in jobs // and do not need to be added to the config separately const nodeExecutor = new CircleCI.executor.DockerExecutor('cimg/node:lts'); // Create Job and add it to the config const nodeTestJob = new CircleCI.Job('node-test', nodeExecutor); myConfig.addJob(nodeTestJob); // Add steps to job nodeTestJob .addStep(new CircleCI.commands.Checkout()) .addStep( new CircleCI.commands.Run({ command: 'npm install', name: 'NPM Install', }), ) .addStep( new CircleCI.commands.Run({ command: 'npm run test', name: 'Run tests', }), ); // Add Jobs to Workflow myWorkflow.addJob(nodeTestJob); // The `stringify()` function on `CircleCI.Config` will return the CircleCI YAML equivalent. const MyYamlConfig = myConfig.stringify(); ``` In the example above, the `MyYamlConfig` variable will contain the following CircleCI config: ```yaml version: 2.1 setup: false jobs: node-test: docker: - image: cimg/node:lts resource_class: medium steps: - checkout: {} - run: command: npm install name: NPM Install - run: command: npm run test name: Run tests workflows: myWorkflow: jobs: - node-test: {} ``` Be sure to see the included [Samples](https://github.com/CircleCI-Public/circleci-config-sdk-ts/tree/main/sample) and [Wiki](https://github.com/CircleCI-Public/circleci-config-sdk-ts/wiki). ## FAQ See the FAQ on the GitHub Wiki: [FAQ · CircleCI-Public/circleci-config-sdk-ts Wiki · GitHub](https://github.com/CircleCI-Public/circleci-config-sdk-ts/wiki/FAQ) ## Use-Cases We believe you’ll build amazing things with the Config SDK that we cannot even imagine yet. But if you’re looking for ideas, why not give one of these a shot? ### Dynamic Config Generation CircleCI recently released “[setup workflows](https://circleci.com/blog/introducing-dynamic-config-via-setup-workflows/)”, a feature that will essentially allow you to run an initial workflow that can set up a second and more substantial workflow. Currently, this feature is often used to conditionally run one of two or more statically generated configuration files. The Config SDK can generate config files at run-time during the setup workflow phase using any JavaScript logic you can imagine. See the proof of concept example here: [circleci-config-sdk-ts/sample/01-dynamic-workflow-javascript at main · CircleCI-Public/circleci-config-sdk-ts · GitHub](https://github.com/CircleCI-Public/circleci-config-sdk-ts/tree/main/sample/01-dynamic-workflow-javascript) ### Private, Packagable, Reusable Configuration Have a particular command, executor, job, or even entire workflow you find yourself reusing over and over again? Consider creating a standard NPM package library for your projects with all of your commonly used CircleCI config Many existing users may already be familiar with [CircleCI’s Orbs](https://circleci.com/orbs/), which provides packages of CircleCI config natively within the YAML config file. With the Config SDK, you can encapsulate any aspect of CircleCI config (including entire workflows!) and manage them with your favorite JavaScript package manager and repository such as NPM. This will also give you access to type definitions. ### Tooling Build tools for the browser and command-line using the SDK as a library. The visual config editor was built using the Config SDK. * * * # Catch the live stream [https://www.meetup.com/continuous-delivery-everywhere/events/281520691/?isFirstPublish=true](https://www.meetup.com/continuous-delivery-everywhere/events/281520691/?isFirstPublish=true) ---
**Author:** ![mathaeus](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mathaeus/32/28404_2.png) [@mathaeus](https://discuss.circleci.com/u/mathaeus)\ **Post date:** [October 20, 2021, 9:24am UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/2 "2021-10-20T09:24:50Z")
Nice, finally a way to write the config in real code 🙌 @KyleTryon which other languages do you plan to support apart from JS and TS? ---
**Author:** ![KyleTryon](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/kyletryon/32/9977_2.png) [@KyleTryon](https://discuss.circleci.com/u/KyleTryon)\ **Post date:** [October 20, 2021, 12:27pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/3 "2021-10-20T12:27:08Z")
🙌 We’re excited to see what you do with it! Python is by far our number one priority but we should be able to support C#, Java, and Python all at the same time. We are looking at using the [JSII build system](https://aws.github.io/jsii/), which is built by AWS and enables the [AWS CDK](https://github.com/aws/aws-cdk) to support multiple languages. We are working on implementing this now, you can view and track the progress on additional languages here: [Feature: Multi-language support via aws/jsii · Issue #51 · CircleCI-Public/circleci-config-sdk-ts · GitHub](https://github.com/CircleCI-Public/circleci-config-sdk-ts/issues/51) Currently, in version 0.4.0 Early Preview, full JSII language support is one of our 1.0.0 release goals. | Language | Version | | --- | --- | | TypeScript | 1.0.0 | | JavaScript | 1.0.0 | | Python | 1.0.0 | | Java | 1.0.0 | | C# | 1.0.0 | | Kotlin | TBD | | Go | TBD | We will begin sharing roadmap timing/planning soon, this board will begin to populate of the course of this preview: [1.0.0 General Availability · GitHub](https://github.com/CircleCI-Public/circleci-config-sdk-ts/projects/2) Also, we’d love to hear from you (and anyone reading this) what languages you would be interested in! ---
**Author:** ![mathaeus](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mathaeus/32/28404_2.png) [@mathaeus](https://discuss.circleci.com/u/mathaeus)\ **Post date:** [October 20, 2021, 1:01pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/4 "2021-10-20T13:01:28Z")
Cool, thanks for the insights. We’d love to see Kotlin support 🙂 ---
**Author:** ![jerdog](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/jerdog/32/32130_2.png) [@jerdog](https://discuss.circleci.com/u/jerdog)\ **Post date:** [October 26, 2021, 6:32pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/5 "2021-10-26T18:32:13Z")
---
**Author:** ![thekatertot](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/thekatertot/32/25169_2.png) [@thekatertot](https://discuss.circleci.com/u/thekatertot)\ **Post date:** [October 26, 2021, 8:40pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/6 "2021-10-26T20:40:59Z")
---
**Author:** ![jerdog](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/jerdog/32/32130_2.png) [@jerdog](https://discuss.circleci.com/u/jerdog)\ **Post date:** [October 27, 2021, 3:57pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/7 "2021-10-27T15:57:38Z")
---
**Author:** ![KyleTryon](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/kyletryon/32/9977_2.png) [@KyleTryon](https://discuss.circleci.com/u/KyleTryon)\ **Post date:** [September 29, 2022, 1:40pm UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/8 "2022-09-29T13:40:41Z")
---
**Author:** ![oranwild](https://avatars.discourse-cdn.com/v4/letter/o/ecccb3/32.png) [@oranwild](https://discuss.circleci.com/u/oranwild)\ **Post date:** [June 14, 2024, 12:04am UTC](https://discuss.circleci.com/t/early-preview-circleci-config-sdk-visual-config-editor-write-config-with-code-or-drag-and-drop/40984/9 "2024-06-14T00:04:08Z")