Help joining/importing/combining multiple .js files in a CodePen Project?

I’m trying to set up a CodePen project that will let me test scripts that I intend to run on a third-party API ( The API runs scripts in a specific manner — it simply concatenates all of the code from all of your scripts, in order, then runs the whole thing. Beyond the content of the scripts, I have no access to the hosting API itself.

Here is an example of two scripts I could run in the API:


const C = (() => {
    const COLORS = {
        purered: "rgba(255, 0, 0, 1)",
        palered: "rgba(255, 175, 175, 1)",
        brightred: "rgba(255, 31, 34, 1)",
        lightred: "rgba(255, 60, 60, 1)",
        black: "rgba(0,0,0,1)"
    return {


const A = (() => {
    const getColor = (colorKey) => C.COLORS[colorKey] ||;
    return {
        GetColor: getColor

Then, in a third script, I could call on either of the above:

console.log(C.COLORS.brightred); // rgba(255, 31, 34, 1)
console.log(A.GetColor("brightred")); // rgba(255, 31, 34, 1)
console.log( // undefined
console.log(A.GetColor("orange")); // rgba(0,0,0,1)

How can I reproduce this behavior in a CodePen project? Thanks in advance for any insights you can provide!

You can post all of the code in the JS window of a codePen and it will work :slight_smile:

Oh I realize that, but the thing is many of my scripts are extremely long and I’d prefer the convenience of being able to access them by their filenames, rather than having to navigate a single massive JS file.

Is there a way to get this to work via modules, or requiring, or external resources or the like?

Are you stuck to using CodePen or can you use other options, like Glitch, JSfiddle or other online editors?

For future reference, it is possible. If you create a Pen for each module and import them into a master:

what about
it will let you set up multiple files projects for free!