Currently, Salesforce is not allowing the creation or editing of LWC files on the developer console. To make simple changes to LWC files within salesforce without using Visual Studio Code.

Below are the steps I followed to create the component:

1. Created a connected app for using tooling API within the salesforce.
2. Created Named credentials with details from step 1.
3. Created Aura enabled methods in Apex class to get, create or update LWC components.
4. Created Future methods to overcome timeout error while making a call to tooling API.
5. Created LWC component to imperatively call apex methods from step 4 and edit or create the same source.

 
public class LWCEditor {
    @AuraEnabled
    public static String getLWCs() {
        String query='SELECT+Id,Description,DeveloperName,IsExposed,TargetConfigs+FROM+LightningComponentBundle';
        String s = 'services/data/v49.0/tooling/query/?q='+query;
        HttpRequest req = new HttpRequest();
        req.setEndpoint('callout:LWCToolingAPI/'+s);
        req.setMethod('GET');
        req.setHeader('Content-Type', 'application/json');
        Http http = new Http();
        HTTPResponse res = http.send(req);
        while (res.getStatusCode() == 302) {
            req.setEndpoint(res.getHeader('Location'));
            res = new Http().send(req);
        }
        System.debug(res.getBody());
        return res.getBody();
    }
    
    @AuraEnabled
    public static String getLWCResource(String bundleId) {
        String query='SELECT+Id,LightningComponentBundleId,Format,FilePath,Source+FROM+LightningComponentResource+WHERE+LightningComponentBundleId=\'' + bundleId +  '\'';
        String s = 'services/data/v49.0/tooling/query/?q='+query;
        HttpRequest req = new HttpRequest();
        req.setEndpoint('callout:LWCToolingAPI/'+s);
        req.setMethod('GET');
        req.setHeader('Content-Type', 'application/json');
        Http http = new Http();
        HTTPResponse res = http.send(req);
        while (res.getStatusCode() == 302) {
            req.setEndpoint(res.getHeader('Location'));
            res = new Http().send(req);
        }
        System.debug(res.getBody());
        return res.getBody();
    }
    @AuraEnabled
    public static String getLWCList() {
        //List lwcList = [SELECT Id, DeveloperName, CreatedBy.Name, CreatedDate, LastModifiedDate FROM LightningComponentBundle];
        //system.debug('lwcList : '+lwcList.size());
        return '';
    }
    
    @AuraEnabled
    public static String updateLWCResource(String id,String fpath,String bundleId,String format, String source) {
        //FutureToolClass.createResource(fpath, bundleId, format, source);
        FutureToolClass.updateResource(id,fpath, bundleId, format, source);
        
        return 'update call sent';
        //return '';
    }
    @AuraEnabled
    public static String createLWCResource(String description,String developerName,String isExposed,String includeCSS,List targets,String sourceHTML,String sourceJS,String sourceMETA) {
        //FutureToolClass.createResource(fpath, bundleId, format, source);
        //FutureToolClass.createResource(fpath, bundleId, format, source);
        FutureToolClass.createResource(description, developerName, isExposed, includeCSS, targets,sourceHTML,sourceJS,sourceMETA);
        return 'update call sent';
        //return '';
    }

}

global class FutureToolClass {
    @future(callout=true)
    public static void createResource(String description,String developerName,String isExposed,String includeCSS,List targets,String sourceHTML,String sourceJS,String sourceMETA)
    {
        system.debug(targets);
        String sb = 'services/data/v49.0/tooling/sobjects/LightningComponentBundle';
        HttpRequest reqSB = new HttpRequest(); 
        String trag = '';
        String targForMetafile='';
        for(integer i=0;i'+targets.get(i)+'';
        }
        String targ = '"targets": {"target": ['+trag+']}';
        //String targ = '"targets": {"target": ["lightning__RecordPage","lightning__AppPage","lightning__HomePage"]}';
        
        String bodySB = '{"FullName":"'+developerName+'","Metadata":{"apiVersion":48,"description": null,"isExplicitImport": false,"isExposed": '+isExposed+',"masterLabel": "'+developerName+'",'+targ+'}}';
        system.debug('body : '+bodySB);    
        reqSB.setEndpoint('callout:LWCToolingAPI/'+sb);
        reqSB.setMethod('POST');
        reqSB.setBody(bodySB);
        reqSB.setHeader('Content-Type', 'application/json');
        Http http = new Http();
        HTTPResponse res = http.send(reqSB);
        system.debug(res.getBody());
        //{"id":"0Rb7F000000XzcqSAC","success":true,"errors":[],"warnings":[],"infos":[]}
        JSONParser parser = JSON.createParser(res.getBody());
        System.JSONToken jt;
        String bundleId;
        //system.debug(resMc.getBody());
        while (parser.nextToken() != null) {   
            if(parser.getCurrentToken()==JSONToken.FIELD_NAME && parser.getText() == 'id'){
                jt = parser.nextToken();
            }   
            if(parser.getCurrentToken()==JSONToken.VALUE_STRING && jt== parser.getCurrentToken()){
                bundleId = parser.getText();
            }
        }
        String source;
        String fpath;
        String format;
        
        system.debug('source');
        system.debug(source);
        system.debug('bundleId');
        system.debug(bundleId);
        
        
        //create js file
        //se format
        format = 'js';
        //se format
        //create FilePath
        fpath = 'lwc/'+developerName+'/'+developerName+'.'+format;
        //create FilePath
        //set Dummy Source
        source = sourceJS;
        //source = '"import { LightningElement } from \'lwc\'; \n export default class Empty extends LightningElement { \n }"';
        //set Dummy Source
        String s = 'services/data/v49.0/tooling/sobjects/LightningComponentResource';
        HttpRequest reqJS = new HttpRequest();
        
        String body = '{"FilePath": "'+fpath+'","LightningComponentBundleId":"'+bundleId+'","Format":"'+format+'", "Source" : ' + source + '}';
        system.debug('body : '+body);    
        reqJS.setEndpoint('callout:LWCToolingAPI/'+s);
        reqJS.setMethod('POST');
        reqJS.setBody(body);
        reqJS.setHeader('Content-Type', 'application/json');
        http = new Http();
        res = http.send(reqJS);
        System.debug(res.getBody());
        //create js file
        //
        
        //create html file
        //create FilePath
        fpath = 'lwc/'+developerName+'/'+developerName+'.html';
        //create FilePath
        //se format
        format = 'html';
        //se format
        //set Dummy Source
        source = sourceHTML;
        //source = '"\n"';
        //set Dummy Source
        s = 'services/data/v49.0/tooling/sobjects/LightningComponentResource';
        HttpRequest reqHtml = new HttpRequest();
        
        body = '{"FilePath": "'+fpath+'","LightningComponentBundleId":"'+bundleId+'","Format":"'+format+'", "Source" : ' + source + '}';
        system.debug('body : '+body);    
        reqHtml.setEndpoint('callout:LWCToolingAPI/'+s);
        reqHtml.setMethod('POST');
        reqHtml.setBody(body);
        reqHtml.setHeader('Content-Type', 'application/json');
        Http httpH = new Http();
        res = httpH.send(reqHtml);
        System.debug(res.getBody());
        //create html file
        
        //create meta file
        //se format
        format = 'js-meta.xml';
        //se format
        //create FilePath
        fpath = 'lwc/'+developerName+'/'+developerName+'.'+format;
        //create FilePath
        //set Dummy Source
        source = sourceMETA;
        //source = '"\n  \n 50 \n '+isExposed+' \n 	 '+targForMetafile+'\n  \n "';
        //set Dummy Source
        s = 'services/data/v49.0/tooling/sobjects/LightningComponentResource';
        HttpRequest reqMeta = new HttpRequest();
        
        body = '{"FilePath": "'+fpath+'","LightningComponentBundleId":"'+bundleId+'","Format":"'+format+'", "Source" : ' + source + '}';
        system.debug('body : '+body);    
        reqMeta.setEndpoint('callout:LWCToolingAPI/'+s);
        reqMeta.setMethod('POST');
        reqMeta.setBody(body);
        reqMeta.setHeader('Content-Type', 'application/json');
        http = new Http();
        res = http.send(reqMeta);
        System.debug(res.getBody());
        //create meta file
        if(includeCSS == 'true' || includeCSS == 'TRUE' || includeCSS == 'True'){
            //create css file if needed
        //se format
        format = 'css';
        //se format
        //create FilePath
        fpath = 'lwc/'+developerName+'/'+developerName+'.'+format;
        //create FilePath
        //set Dummy Source
        source = '"#dummy css"';
        //set Dummy Source
        s = 'services/data/v49.0/tooling/sobjects/LightningComponentResource';
        HttpRequest reqCSS = new HttpRequest();
        
        body = '{"FilePath": "'+fpath+'","LightningComponentBundleId":"'+bundleId+'","Format":"'+format+'", "Source" : ' + source + '}';
        system.debug('body : '+body);    
        reqCSS.setEndpoint('callout:LWCToolingAPI/'+s);
        reqCSS.setMethod('POST');
        reqCSS.setBody(body);
        reqCSS.setHeader('Content-Type', 'application/json');
        http = new Http();
        res = http.send(reqCSS);
        System.debug(res.getBody());
        //create css file if needed
        }
        //return res.getBody();
    }
    @future(callout=true)
    public static void updateResource(String id,String fpath,String bundleId,String format, String source)
    {   
        system.debug('source');
        system.debug(source);
        system.debug('bundleId');
        system.debug(bundleId);
       
        String s = 'services/data/v49.0/tooling/sobjects/LightningComponentResource/'+id;
        HttpRequest req = new HttpRequest();
        
        String body = '{"Source" : ' + source + '}';
        system.debug('body : '+body);    
        req.setEndpoint('callout:LWCToolingAPI/'+s);
        req.setMethod('PATCH');
        req.setBody(body);
        req.setHeader('Content-Type', 'application/json');
        Http http = new Http();
        HTTPResponse res = http.send(req);
        while (res.getStatusCode() == 302) {
            req.setEndpoint(res.getHeader('Location'));
            res = new Http().send(req);
        }
        System.debug(res.getBody());
        //return res.getBody();
    }
}

<template>
		<lightning-card  title="LWC Editor">
				<lightning-button label="New" slot="actions" variant="brand" onclick={handleNewLWC}></lightning-button>
				<lightning-button label="Save" slot="actions" variant="success"  onclick={handleSaveLWC}></lightning-button>
				
				<div class="c-container">
            <lightning-layout multiple-rows="true">
                <lightning-layout-item padding="around-small" size="12">
                    <lightning-layout>
                        <lightning-layout-item padding="around-small" size="3">
                            <div class="page-section page-right">
                                <h2>Existing Components</h2>
                                <template if:true={listLWCs}>
																		<lightning-accordion class="example-accordion">
																				<template for:each={listLWCs} for:item="bear" >
																						<lightning-accordion-section name={bear.Id} label={bear.DeveloperName} key={bear.Id} onclick={loadResources}>
																								<template if:true={listResources}>
																										<template for:each={listResources} for:item="lr" >
																												<span key={lr.Id}>
																												<p id={lr.Id} onclick={loadSource}>{lr.FilePath}</p><br/>
																												</span>
																										</template>
																								</template>
																						</lightning-accordion-section>																						
																				</template>
																		</lightning-accordion>
																		
																</template>
                            </div>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="9">
                            <div class="page-section page-main">
                                <h2>Editor</h2><!--
																<lightning-formatted-rich-text value={source}>
																</lightning-formatted-rich-text>
																123-->
																<textarea id="codeContainer" name="codeContainer" rows="15" cols="100" onblur={updateSource}>
																		{source}
																</textarea><!--
                                <lightning-input-rich-text value={source} formats={formats}>
																		 <lightning-rich-text-toolbar-button-group slot="toolbar" aria-label="Save Button Group">
																				<lightning-rich-text-toolbar-button
																						icon-name="utility:save"
																						icon-alternative-text="Save"
																						onclick={handleSave}>
																				</lightning-rich-text-toolbar-button>
																		</lightning-rich-text-toolbar-button-group>
																</lightning-input-rich-text>-->
                            </div>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-layout-item>
								
            </lightning-layout>
        </div>
		
				<p slot="footer">Card Footer</p>
		</lightning-card>
		<template if:true={isModalOpen}>
				<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <!-- Modal/Popup Box LWC header here -->
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close"
                            alternative-text="close"
                            variant="inverse"
                            size="small" ></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box header LWC</h2>
                </header>
                <!-- Modal/Popup Box LWC body starts here -->
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
										<lightning-input type="text" label="Component name" onblur={sCompName}></lightning-input><br/>
										<lightning-input type="checkbox" label="Include CSS file" name="cssOption" onchange={sCheckboxValue}></lightning-input><br/>
										<lightning-input type="checkbox" label="Is Exposed?" name="exposedOption" onchange={sCheckboxValue}></lightning-input><br/>
										<h2 class="header">Target</h2><br/>
										<lightning-input type="checkbox" label="lightning__HomePage" name="lightning__HomePage" onchange={sCheckboxValue}></lightning-input><br/>
										<lightning-input type="checkbox" label="lightning__RecordPage" name="lightning__RecordPage" onchange={sCheckboxValue}></lightning-input><br/>
										<lightning-input type="checkbox" label="lightning__AppPage" name="lightning__AppPage" onchange={sCheckboxValue}></lightning-input><br/>
										<lightning-input type="checkbox" label="lightning__Tab" name="lightning__Tab" onchange={sCheckboxValue}></lightning-input><br/>
										
								</div>
								<footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">OK</button>
                </footer>
						</div>
				</section>
				<div class="slds-backdrop slds-backdrop_open"></div>
		</template>
</template>

1
import { LightningElement } from 'lwc';
import getLWCs from '@salesforce/apex/LWCEditor.getLWCs';
import getResources from '@salesforce/apex/LWCEditor.getLWCResource';
import updateResources from '@salesforce/apex/LWCEditor.updateLWCResource';
import createLWCResource from '@salesforce/apex/LWCEditor.createLWCResource';

export default class LWCEditor extends LightningElement {
		
    listLWCs;
		listResources;
		error;
		successMessage;
		bundleId = '';
		resourceId = '';
		filePath='';
		source = '';
		format = '';
		isModalOpen = false;
		targetsList = '';
		
		//new LWC component variables
		developerName;
		includeCSS=false;
		isExposed=false;
		targets = [];
		//new LWC component variables
		formats = ['font', 'size', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'link', 'clean', 'table', 'header', 'color','code'];
		
		connectedCallback() {
				this.loadLWCs();
		}
	loadLWCs() {
		getLWCs()
			.then(result => {
				console.log(result);
				let parsedValue = JSON.parse(result)
				this.listLWCs = parsedValue.records;
			})
			.catch(error => {
				this.error = error;
			});
	}
		
	loadResources(event) {
			if(event.target.name!==undefined){
					this.bundleId = event.target.name;
					getResources({bundleId:event.target.name})
							.then(result => {
							console.log(result);
							let parsedValue1 = JSON.parse(result)
							this.listResources = parsedValue1.records;
					})
							.catch(error => {
							console.log(error);
							this.error = error;
					});
			}		
	}
		loadSource(event) {
				for(let acc of this.listResources){
						if(acc.Id ===  event.target.id.substring(0,18)){
								console.log('334455' );
								console.log(acc.FilePath );
								console.log(acc.Source );
								this.resourceId = acc.Id;
								this.filePath = acc.FilePath;
								this.source = acc.Source;
								this.format = acc.Format;
						}else{
								console.log('error');
								console.log('else');
						}
				}
		}
		
		handleSaveLWC() {
				console.log('111222' );
				console.log(this.bundleId );
				console.log(this.filePath );	
				console.log('111222' );		
				updateResources({id:this.resourceId ,fpath:this.filePath,bundleId:this.bundleId,format:this.format, source:JSON.stringify(this.source)})
							.then(result => {
							console.log(result);
							//let parsedValue1 = JSON.parse(result)
							//this.listResources = parsedValue1.records;
					})
							.catch(error => {
							console.log(error);
							this.error = error;
					});
		}
		
		updateSource(event) {
				console.log('update' );
				console.log(event.target.value );
				this.source = event.target.value;
		}
		sCheckboxValue(event) {
				console.log('setCheckboxValue' );
				console.log(event.target.name );
				
				if(event.target.name === 'cssOption'){
						this.includeCSS = true;
				}
				if(event.target.name === 'exposedOption'){
						this.isExposed = true;
				}
				
				if(event.target.name === 'lightning__HomePage' || event.target.name === 'lightning__RecordPage' || event.target.name === 'lightning__AppPage' || event.target.name === 'lightning__Tab'){
						this.targets.push(event.target.name);
						this.targetsList =  this.targetsList + '\n <target>'+event.target.name+'</target>';
				}
		}
		sCompName(event) {
				console.log('sCompName' );
				this.developerName = event.target.value;
		}
		
		handleNewLWC() {
				this.isModalOpen = true;
		}
		closeModal() {
				this.isModalOpen = false;
		}
		submitDetails() {
				const d = new Date();
				let sourceHTML = '<!-- @description: \n @author: ChangeMeIn@UserSettingsUnder.SFDoc \n @last modified on: '+d.toDateString()+' \n @last modified by: ChangeMeIn@UserSettingsUnder.SFDoc-->\n<template>\n</template>';
				let sourceJS = 'import { LightningElement } from \'lwc\'; \n export default class Empty extends LightningElement { \n }';
				let sourceMETA = '<?xml version="1.0"?>\n <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> \n <apiVersion>50</apiVersion> \n <isExposed>'+this.isExposed+'</isExposed> \n 	<targets> '+this.targetsList+'\n </targets> \n </LightningComponentBundle>';
				createLWCResource({description:'' ,developerName:this.developerName,isExposed:this.isExposed,includeCSS:this.includeCSS,targets:this.targets,sourceHTML:JSON.stringify(sourceHTML),sourceJS:JSON.stringify(sourceJS),sourceMETA:JSON.stringify(sourceMETA) })
							.then(result => {
							console.log(result);
						this.successMessage = result;
								setTimeout(function () {
										window.location.reload();
								}, 5000);
							
							//let parsedValue1 = JSON.parse(result)
							//this.listResources = parsedValue1.records;
					})
							.catch(error => {
							console.log(error);
							this.error = error;
					});
				//createLWCResource(String description,String developerName,String isExposed,List<String> targets
				this.isModalOpen = false;
		}
}
2

Git repo: https://github.com/risha9177719594/LWCEditor

 Apex callout example:

Http http = new Http(); HttpRequest request = new HttpRequest(); request.setEndpoint('https://example.com'); request.setMethod('GET'); HttpResponse response = http.send(request); // If the request is successful, parse the JSON response. if (response.getStatusCode() == 200) { // Deserialize the JSON string into collections of primitive data types. Map<String, Object> results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody()); // Cast the values in the 'animals' key as a list List<Object> animals = (List<Object>) results.get('animals'); System.debug('Received the following animals:'); for (Object animal: animals) { System.debug(animal); } }

Passing Parameters to REST callout:

Http http = new Http(); HttpRequest request = new HttpRequest(); request.setEndpoint('https://th-apex-http-callout.herokuapp.com/animals'); request.setMethod('POST'); request.setHeader('Content-Type', 'application/json;charset=UTF-8'); // Set the body as a JSON object request.setBody('{"name":"mighty moose"}'); HttpResponse response = http.send(request); // Parse the JSON response if (response.getStatusCode() != 201) { System.debug('The status code returned was not expected: ' + response.getStatusCode() + ' ' + response.getStatus()); } else { System.debug(response.getBody()); }

For Test class:

// Create the mock response based on a static resource StaticResourceCalloutMock mock = new StaticResourceCalloutMock();

// Associate the callout with a mock response Test.setMock(HttpCalloutMock.class, mock);

A callout example from trailhead:

@isTest global class AnimalsHttpCalloutMock implements HttpCalloutMock { // Implement this interface method global HTTPResponse respond(HTTPRequest request) { // Create a fake response HttpResponse response = new HttpResponse(); response.setHeader('Content-Type', 'application/json'); response.setBody('{"animals": ["majestic badger", "fluffy bunny", "scary bear", "chicken", "mighty moose"]}'); response.setStatusCode(200); return response; } }

Basic Authentication code:

String username = 'myname';

String password = 'mypwd';  

Blob headerValue = Blob.valueOf(username + ':' + password);

String authorizationHeader = 'BASIC ' +

EncodingUtil.base64Encode(headerValue);

request.setHeader('Authorization', authorizationHeader);

Authentication using Named credentials:

request.setEndpoint('callout:<Nameed credential>/services/data/v32.0');

ref:

https://trailhead.salesforce.com/en/content/learn/modules/apex_integration_services/apex_integration_rest_callouts

 Disable Lightning Locker for an Aura component by setting the Salesforce API version to 39.0 or lower for the component. If a component is set to at least API version 40.0, Lightning Locker is enabled.

The Proxy object ensures that a component only sees DOM elements created by a component in the same namespace.

For security, Lightning Locker restricts the use of global objects by hiding an object or by wrapping it in a secure version of the object. For example, the secure version of window is SecureWindow. Locker intercepts calls to window and uses SecureWindow instead. Some methods and properties have different behavior or aren’t available on the secure objects.